css下拉導航不是在IE 7或6中正確

Question

試圖弄清楚IE7和我的CSS導航下拉菜單正在發生什麼。

它正確顯示在我嘗試過的每一個其他瀏覽器中，但在IE7中，它正常下降，但當你將鼠標懸停在鏈接上時，它們中的一些會隨機出現/消失。這讓我瘋狂！

這裏是我的菜單HTML：

<div id="navCatTabsWrapper"> 
<div id="navCatTabsDropdown"> 
<ul> 
<li><a class="category-top" href="index.php?main_page=index&amp;cPath=39">All Products</a></li> 
<li><a class="category-top" href="index.php?main_page=index&amp;cPath=1">Dinnerware</a> 
<ul> 
<a href="index.php?main_page=index&amp;cPath=11"><li>Appetizer/Dessert/Salad</li></a> 
<a href="index.php?main_page=index&amp;cPath=9"><li>Bowls</li></a> 
<a href="index.php?main_page=index&amp;cPath=40"><li>Bread & Butter</li></a> 
<a href="index.php?main_page=index&amp;cPath=12"><li>Buffet/Charger Plates</li></a> 
<a href="index.php?main_page=index&amp;cPath=10"><li>Cups/Mugs</li></a> 
<a href="index.php?main_page=index&amp;cPath=7"><li>Dinner Plates</li></a> 
<a href="index.php?main_page=index&amp;cPath=6"><li>Dinnerware Sets</li></a> 
</ul> 
</li> 
<li><a class="category-top" href="index.php?main_page=index&amp;cPath=3">Drinkware</a> 
<ul> 
<a href="index.php?main_page=index&amp;cPath=27"><li>Acrylic</li></a> 
<a href="index.php?main_page=index&amp;cPath=42"><li>Bar Accessories</li></a> 
<a href="index.php?main_page=index&amp;cPath=41"><li>Pitchers</li></a> 
<a href="index.php?main_page=index&amp;cPath=26"><li>Wine Glasses</li></a> 
</ul> 
</li> 
</ul> 
</div> 
</div> 

下面是下拉的CSS：

#navCatTabsWrapper 
{ 
margin: 0em; 
/*background-color: #BD0044;*/ 
background-image:url(../images/nav-bg.jpg); 
backgroud-repeat:repeat-x; 
font-weight: bold; 
color: #fff; 
height:30px; 
width: 100%; 
} 

#navCatTabs ul 
{ 
margin: 0; 
padding: 0.5em 0em; 
list-style-type: none; 
text-align: center; 
line-height: 1.5em; 
} 

#navCatTabs ul li 
{ 
display: inline; 
} 

#navCatTabs ul li a 
{ 
text-decoration: none; 
padding: 0em 0.5em; 
margin: 0; 
color: #fff; 
white-space: nowrap; 
} 

#navCatTabsDropdown 
{ 
margin-top: -20px; 
height:30px; 
font-size:120%; 
} 

#navCatTabsDropdown ul li 
{ 
position: relative; 
display: inline; 
} 

#navCatTabsDropdown * li ul 
{ 
display: block; 
left: 0; 
visibility: hidden; 
position: absolute; 
padding: 0em; 
margin-left:0.5em; 
white-space: nowrap; 
z-index: 100; 

} 

#navCatTabsDropdown * ul li 
{ 
display: block; 
text-align: left; 
list-style-type: none; 

} 

#navCatTabsDropdown * li:hover ul 
{ 
visibility:visible; 
background-color: #ffffff; 
border: 2px outset; 
white-space: nowrap; 
} 

#navCatTabsDropdown * li:hover ul li 
{ 
padding-left:0.5em; 
padding-right:0.5em; 
padding-top:0.25em; 
padding-bottom:0.25em; 
} 

#navCatTabsDropdown * li:hover ul li:hover 
{ 
background-color:#BD0044; 
} 

#navCatTabsDropdown * ul li:hover 
{ 
color:#fff; 
} 

#navCatTabsDropdown ul li a.category-top 
{ 
display:inline-block; 
color:#fff; 
height:30px; 
line-height:30px; 
padding-left:15px; 
padding-right:15px; 
} 

#navCatTabsDropdown ul li a.category-top:hover 
{ 
background:url(../images/nav-bg-hover.jpg) repeat-x; 
color:#BD0044; 
height:auto; 
} 

Answer 1

首先，您的標記是完全不正常的。您在您的子菜單中的無序列表下嵌套列表項目，這是錯誤的，所以我們可以先解決這個問題。

<li> 
    <a class="category-top" href="index.php?main_page=index&amp;cPath=1">Dinnerware</a> 
    <ul> 
     <li><a href="index.php?main_page=index&amp;cPath=11">Appetizer/Dessert/Salad</a></li> 
     <li><a href="index.php?main_page=index&amp;cPath=9">Bowls</a></li> 
     <li><a href="index.php?main_page=index&amp;cPath=40">Bread & Butter</a></li> 
     <li><a href="index.php?main_page=index&amp;cPath=12">Buffet/Charger Plates</a></li> 
     <li><a href="index.php?main_page=index&amp;cPath=10">Cups/Mugs</a></li> 
     <li><a href="index.php?main_page=index&amp;cPath=7">Dinner Plates</a></li> 
     <li><a href="index.php?main_page=index&amp;cPath=6">Dinnerware Sets</a></li> 
    </ul> 
</li> 

做到這一點後，你需要正確定位你的子菜單項，目前你使用這樣的事情：

#navCatTabsDropdown * li ul { ... } 

，我甚至無法理解它是如何工作，所以你可以通過消除星號來解決這個問題。

現在解決你的問題。您的子菜單沒有正確定位到您的菜單項下，因爲它沒有從打開的位置引用top。您可以通過將top:100%添加到您的子菜單來修復該問題，這樣它會從菜單項中正好打開100%，這樣子菜單就會自動將其自己定位到菜單項的下方。

#navCatTabsDropdown li ul { 
top: 100%; 
} 

這裏是你的代碼的jsfiddle全部到位的修正：http://jsfiddle.net/vaGDF/2/，不過我建議你從頂部開始並妥善重寫你的菜單。這裏是一個簡單的菜單，我爲另一個答案作出了這樣的，你可以用作基地：http://jsfiddle.net/andresilich/pc8wN/1/