View Full Version : Dropdown CSS > li width

Aug 30th, 2004, 04:59 PM
I've developed a dropdown navigation menu from a tutorial. The basic menu works perfect in IE and FF. But I would like to change a few things that for the life of me I can't get to work. First would be that under each item in the dropdown menu I would like there to be a bottom border. So in my css file I added border-bottom to the li li {} section. Now I am faced with two problems.

First in firefox the border expends maybe 5px. Apon further investigation I found that for some reason FF has the <li> tags only about 5px wide all over the place! In IE it extends atleast below the text but won't will the entire <li> like it should! FF also doesn't give the border to all the links like it should.

The next problem is in the width of the elements. Instead of the dropdown part being a set width, I would like the the part that drops down to stretch so that each link is on one line. But the entire part that drops down would be still remain rectangular like it does now.

[Link1][Link2][Link3] *with the mouse over the link 1

|Url1 |
|Url2 |
|Much Longer|

instead of

[Link1][Link2][Link3] *with the mouse over the link 1
|Url1 |
|Url2 |

I think this has something to do with the width of the li, so I set the width to auto. No change.

To recap my lengthy post.
Getting a bottom border on the li tags in the dropdown
Getting FF to behave with the bottom border and widths
Each link should be on only one line

I think that getting the <li> width to behave will solve most of my problems. Here's a link to the zip file will all the ziles.

Too big to upload on to here.

Aug 31st, 2004, 02:36 AM
You'll get more responses if you upload the site to freewebs and just link to the page in question. Most of us use favelets or extensions that allow you to edit live css, so it's much quicker to be able to have a look and try some things than download and unpack a folder onto your HDD.
Especially when you're supposed to be working :o

Quick suggestions:
1) 'all on one line' - the only way you're going to achieve that is to set a width in 'em' and make sure it is larger than the longest menu item. Try about 8em.
2) Setting a defined width should fix the border problem, but I really need to take a look at the code to more certain.

//gets back to work.

Aug 31st, 2004, 09:01 PM
Sorry. I only uploaded one page for testing, but all the css and script is there.

I'm trying out the ems now.

EDIT: Thanks mindlesslemming. Setting the width of the li in ems worked like a charm. :thumbsup: