嵌套下拉菜單對齊

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或至少一個最小寬度。