Encountering a peculiar issue with IE7.
In Chrome, Firefox, and IE8, hovering over the main navigation at the top near the header image displays the sub nav correctly aligned with the parent LI. However, in IE7, the subnav appears slightly misaligned when you hover over the main nav.
The nested UL, #mainNav ul ul, is positioned absolutely inside the parent UL with a left value of 0.
If I adjust the left value to left:1px, it aligns correctly in IE7 but causes issues in Chrome/FF/IE8.
Not sure why this discrepancy exists despite having the parent UL (#mainNav ul) relatively positioned. Using an IE hack to force a left value of 1px for IE7 might solve the problem, but I would prefer to avoid that solution if possible.
Any assistance or insights are appreciated. Sharing CSS for the navigation elements:
/* NAVIGATION *********************************************************************************************** */
#mainNav { position: relative; width: 951px; margin: 0 auto; padding: 15px 0; z-index: 3; }
#mainNav ul { line-height: 100%; height: 35px; margin: 0; padding: 0; font-size: 20px; width: 951px; }
#mainNav ul li { line-height: 100%; list-style: none; float: left; text-transform: uppercase; height: 100%; position: relative; display: block; }
#mainNav ul li a { line-height: 0; height: 22px; border: 1px solid transparent; text-decoration: none; padding: 7px 15px 5px; position:relative; display: block; }
#mainNav ul li a:hover { }
#mainNav ul li.hover a { }
#mainNav ul li a.current { }
#mainNav ul li.lastItem { }
#mainNav ul ul { display: none; z-index:2; position: absolute; top: 35px; left: 0px; padding: 5px 0 10px; width: 200px; height: auto; -moz-box-shadow: 3px 3px 3px #444; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.5); }
#mainNav ul li.current ul { left: 1px; }
#mainNav ul li.hover ul li { background-position: 10px 8px; background-repeat: no-repeat; }
#mainNav ul li.hover ul li.hover { background-color: #baceda; background-position: 10px -20px; }
#mainNav ul li ul li { float: none; }
#mainNav ul li ul li a { background: none; line-height: 1; font-size: 15px; padding: 3px 30px 0; }
#mainNav ul li ul li.hover a { }
#mainNav ul li ul li a.current { }