嵌套下拉菜单对齐

Question

我已经花了几天的时间已经找到一种方法来均匀地在固定宽度的横条上均匀地分配可变大小的菜单项，并最终找到了详细的jQuery解决方案here。我现在遇到的问题是，我的嵌套下拉菜单在不同的浏览器中显示的截然不同，我非常需要它们正确地从各自的锚点下拉。

This is the site in question

到目前为止，它看起来确定在Firefox。在Internet Explorer中，将dorp下拉菜单推到右侧，在Safari中将它们推到左侧。我尝试了很多东西，但我认为目前这超出了我的想象。

这里的有关HTML CSS &，虽然你可以在网站上查看源代码太：

 <nav> 
      <ul id="main-nav"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Products</a> 
        <ul> 
         <li><a href="#">Wood Wool</a></li> 
         <li><a href="#">Wood Wool Bales</a></li> 
         <li><a href="#">Wood Wool Rope</a></li> 
         <li><a href="#">Coloured Wood Wool</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Applications</a> 
        <ul> 
         <li><a href="#">Hamper Packaging</a></li> 
         <li><a href="#">Wine &amp; Champagne</a></li> 
         <li><a href="#">General Gifts</a></li> 
         <li><a href="#">Soaps &amp; Cosmetics</a></li> 
         <li><a href="#">Shellfish Packaging</a></li> 
         <li><a href="#">Stable Bedding</a></li> 
         <li><a href="#">Industrial</a></li> 
         <li><a href="#">Pesticide Alternative</a></li> 
        </ul> 
       </li> 
       <li><a href="#">What's Wood Wool?</a></li> 
       <li><a href="#">The Eco Bit</a></li> 
       <li><a href="#">Get in touch</a></li> 
       <li><a href="#">Blog</a></li> 
      </ul> 
     </nav> 

/* NAVIGATION BAR */ 

header nav{ 
background-image: url(../_images/nav-bar-bg.png); 
height: 48px; 
width: 960px; 
position: absolute; 
top: 96px; 
} 

header nav #main-nav{ 
width:900px; 
margin-left:30px; 
} 

header nav ul li { 
display:block; 
float: left; 
} 

header nav ul li a { 
display:inline-block; 
height:48px; 
line-height:48px; 
text-decoration: none; 
color: white; 
font-weight:normal; 
font-size:16px; 
} 

header nav ul li a:hover { 
color: #09b497; 
text-shadow:2px 2px 2px #000; 
} 


/* NESTED MENU OPTIONS */ 

header nav ul li ul { 
position:absolute; 
float: left; 
visibility: hidden; 
top:40px; 
height:auto; 
border:2px solid #0a7c6c; 
background-color:#FFF; 
-webkit-border-radius: 6px; 
-moz-border-radius: 6px; 
border-radius: 6px; 
-moz-box-shadow: 0 0 10px #000; 
-webkit-box-shadow: 0 0 10px #000; 
box-shadow: 0 0 10px #000; 
} 

header nav ul li:hover ul { 
visibility: visible; 
} 

header nav ul li ul li { 
display:block; 
height:30px; 
float:left; 
clear:left; 
} 

header nav ul ul li a{ 
padding: 0 12px; 
line-height:30px; 
text-align:left; 
font-size:14px; 
color:#0a7c6c; 
} 

header nav ul ul li a:hover{ 
color: #09b497; 
text-shadow:none; 
} 

Answer 1

添加position:relative您header nav ul li。你的header nav ul li ul已将它的位置设置为绝对，所以它应该是绝对的相对于它的父母。

忘了添加，您还需要添加一个宽度到header nav ul li ul或至少一个最小宽度。