IE7嵌套绝对定位 <ul> 内部相对定位 <ul> 问题

Question

I seem to be running into a strange issue with IE7.

If you visit the following URL, http://tinyurl.com/3qrbhn4 , and hover over the main navigation at the top, right above the header image in Chrome, Firefox, and IE8, the sub nav that displays once you hover over a nav element (for example, hover over Meetings) appears to line up correctly with the parent LI. However, if you try hovering over the main nav in IE7, the subnav appears one pixel off.

If you inspect the nested UL, which is #mainNav ul ul, you'll notice that it's being positioned absolutely inside of the parent UL with a left vale of 0.

If I give it a left value of left:1px, however, it lines up correctly in IE7, but breaks in Chrome/FF/IE8.

I'm not sure why this is happening, and I currently have the parent UL (#mainNav ul) positioned relatively, so I'm not sure why there would be a difference in how IE7 displays the subnav UL. I know I can "fix" this with an IE hack and just force IE7 to display the subnav ul with a left value of 1px, but I'd like to avoid that route if possible.

Can anyone help? Please let me know if I've provided enough information! I'm listing the CSS for the nav elements in question:

/* 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 {  }

Answer 1

尝试将#mainNav ul ul从left:1px更改为left:auto 。