The usual problem…my menu is working beautifully until I check it in IE, and then it falls apart. I’m sure I could figure out if I spend a couple of hours tearing my hair out.
But I’d like to keep my hair…so I’m hoping some kind soul can troubleshoot this for me. I’d appreciate any help I can get.
Here’s the link. http://dayaceglia.com/clients/mc/test.html
Thank you.
Hi,
Just float the anchor left also to fix IE.
You can use some shorthand too and reduce your code as shown below. 
You can loose everything in red.
[COLOR=Black][B]#nav2 li [/B][/COLOR]{
[COLOR=Blue]float: left;[/COLOR]
height: 26px;
border-right: 1px solid #fff;
[COLOR=Blue]font:bold 11px Verdana, Geneva, sans-serif;[/COLOR]
list-style: none;
[COLOR=Red]/*font-size: 11px;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
display: block; */[/COLOR]
}
[B]#nav2 li a[/B] {
[COLOR=Blue]float: left;[/COLOR]
height: 19px;
[COLOR=Blue]padding:4px 10px 3px 10px; [/COLOR]
color: #fff;
text-decoration: none;
[COLOR=Red]/*display: block;*/
/*padding-top: 4px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px; */[/COLOR]
}
It looks like you are going to have more problems with that menu you are using. It is causing problems with the dropdown now. Rather than using display:none; to hide the sub ul it would be best to use a standard suckerfish menu that hides the ul with a large negative margin.
View the page source on This Example and you will see that it hides the sub ul with margin-left:-999em;
Here is Another Example that has all the IE bugs worked out of it. That one uses widthless list items.
Hope that helps 
Thanks for the new Suckerfish code. I’ve made another stab at it and it’s looking much better. One more thing…the submenu items will be of varying lengths—some quite long and others just one word. Is there a way to set the width to auto without screwing it up.
Here’s the new url: http://dayaceglia.com/clients/mc/test.html
(css is internal this time—sorry about that.)
Thanks for your help.
Is there a way to set the width to auto without screwing it up.
Hi,
Not really, the “sub ul li a” needs to have a width set since it has been reset to display:block and the float has been reset to none. Those are override styles so it does not inherit the “li a” float.
IE needs a width for the “sub ul li a” to work properly. You just need to increase the widths. If you look back at my demo you will see that the sub ul width was the same as the “sub ul li a” width with padding.
My Code
[B]#nav ul[/B] {
position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
[COLOR=Blue]width:10em;[/COLOR]
margin-left:-999em;/* hide the sublist */
left:0; /* IE6&7 need this to position the sublist correctly on hover*/
top:1.75em;
list-style:none;
background: #FFF url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
border:1px solid #000;
}
[B]#nav li li[/B]{
float:left;/*[COLOR=Red](note: lack of float here triggers IE6/7 overflow bug[/COLOR]) i[COLOR=Blue]nherits from #nav li anyway unless reset [/COLOR]*/
border:0;/*reset borders from #nav li*/
}
[B]#nav li li a[/B]{
[COLOR=Blue]float: none;/*reset the float from #nav li a*/
display:block;[/COLOR]
[COLOR=Blue]width:9em;/*IE6 needs a width (10em total with padding)*/[/COLOR]
line-height:1.2; /*reset from #nav li a */
padding:.3em [COLOR=Blue].5em;[/COLOR]
}
You are having problems with the top:28px on your sub ul. The dropdown disappears before you can catch it because your main links are 25px tall.
You need to set the top at 25px and just set a fake top border to match up with the bottom border of your main ul. You need to get your li li a width and paddings both set in pixels if that is what you are using. Then take that total width and apply it to the sub ul in place of width:auto;
I have made the corrections of the sub ul top position below but you still need to get your widths synched together.
Your Code
/*=== All Sublist Styles ===*/
#nav2 ul {
position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav2 li) in this case*/
[COLOR=Red]/*width:auto;*/[/COLOR]
[COLOR=Blue]width:10em ; /*this needs to be the total width of the li li a*/[/COLOR]
[COLOR=Blue]top:25px;[/COLOR] /[COLOR=Red]*was 28px*/[/COLOR]
[COLOR=Blue]border-top:3px solid #000;/*fake it back to top:28px*/[/COLOR]
left:0; /* IE6&7 needs this to position the sublist correctly on hover*/
margin-left:-999em;/* hide the sublist */
list-style:none;
[COLOR=Red]/*border-right: 1px solid #fff; move to #nav2 li li*/
/*border-left: 1px solid #fff; move to #nav2 li li*/[/COLOR]
background:#e0e6f2 url(foo) fixed;/* IE needs some sort of BG on the nested ul */
}
#nav2 li li{
/*float:left;/*(note: lack of float here triggers IE6/7 overflow bug) inherits from #nav2 li anyway unless reset */
border:0;/*reset borders from #nav2 li*/
[COLOR=Blue]border-right: 1px solid #fff;
border-left: 1px solid #fff; [/COLOR]
}
#nav2 li li a {
float: none;/*reset the float from #nav2 li a*/
display:block;[COLOR=Blue] [COLOR=Red]width:9em;/[/COLOR][/COLOR]*IE6 needs a width (10em total with padding)*/
line-height:150%; /*reset from #nav2 li a */
padding:5px [COLOR=Red]10px;/*set the width and padding in pixels or ems, do not mix them*/[/COLOR]
font-weight: normal;
color: #032c5f;
border-bottom: 1px solid #FFF;
}
…the submenu items will be of varying lengths—some quite long and others just one word
In addition to what I just posted above, you need to bear in mind that the text will wrap to another line if it is more than one word.
That long string of “xxxxxxxxxxxxxx’s” you were using on your page is not an accurate example of a typical word. It is normal for a string of text to break out of any container when there is not enough room for it.
Here is Another Example of that same code I gave you where I have intentionally let the text in one of the links wrap to another line. I also reset the line-height on the “sub li a” back to normal so it did not inherit from the main list items.
You should do just fine by making the “sub li a” width a little wider than the 9em.
Thank you! Thank you! Unfortunately I get frustrated and start messing too much with the code and screw it up. I’ll try to leave it alone now. : )
Your help is much appreciated.