Date: 03/08/06 (WebDesign)    Keywords: browser, css

Adding a new post so the other doesn't get too cluttered. I've fixed the CSS code so that it looks a little better. Again, this is the link.


/* all lists */
#navmenu, #navmenu ul {padding: 0;
margin: 0;
list-style: none;
line-height: 1;
width: 75em;
font-family: verdana, arial, helvetica;
font-size: .7em;
color: #52686F;
font-weight: normal;}

#navmenu a {display: block;
width: 5em;}

/* all list items */
#navmenu li {float: left;
width: 10em;
padding: 5px;}

/* second-level lists */
#navmenu li ul {position: absolute;
background: #C2C3BC;
border: 1px solid #8C856B;
font-family: verdana, arial, helvetica;
font-size: 1em;
width: 10em;
left: -999em;}

/* third-and-above-level lists */
#navmenu li ul ul {margin: -1em 0 0 3em;}

#navmenu li:hover ul ul, #nav li.sfhover ul ul {left: -999em;}

/* lists nested under hovered list items */
#navmenu li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {left: auto;}

These are my questions:

1. In IE, is there a fix so that the menu will fall below the main item instead of beside it?
2. How can I get my links to not wrap? I tried resizing the LI, but all that does is add extra space to
the right side.
3. In Firefox, not sure about other browsers, the width of my menu is too large, but if I resize in IE, it
screws the whole thing up.
4. If I wanted a border separating each link in the dropdowns, in which element would I place the border
style?

I hope those were clear enough. Thanks again for everyone's help!

Source: http://community.livejournal.com/webdesign/1076660.html