When I test in IE7, the menu jitters on first mouseover and changes position slightly. Also, when hovering over a menu item that contains a submenu, the menu jitters again. I think both issues have to do with IE7 hasLayout but I'm not sure.
Is there a way to ensure hasLayout in the css for IE7 on my menu and sub-menu tags? Or, are there text nodes being inserted somehow in IE7? Thank you for your help.
Indeed you are right. Seems it was a hasLayout issue with IE7.
I changed a CSS properties.
#nav {
margin: 70px 0px 0px -15px;
padding: 0px;
list-style: none;
font-size: 14px;
position: relative;
}
#nav li a {
display: inline-block; /* changed it to inline-block for IE compatibility */
width: 195px; /* declared width since it's now inline-block */
padding: 0 0 0 15px; /* total width 210px with padding */
text-decoration: none;
line-height:20px; /* vertical center with line-height instead */
color: #262626;
height: 20px;
}
.subnav {
margin: -26px 0 0 ;
padding: 0;
list-style: none;
position: absolute;
display: none;
left:196px;
background: #201d1e;
width: 325px;
}
/* same idea as (#nav li a) */
.subnav a {
display: inline-block;
color: #fff !important;
padding: 0 0 0 15px;
width: 310px;
line-height:20px;
height: 20px;
}
The sub-menu renders a few pixels higher that the modern browsers, but the -26px on .subnav can be adjusted with a IE7 stylesheet. I think it's close to margin-top: -10px for IE7. Hope this works out.