css dropdown navigation not right в IE 7 или 6

Question

Попытка выяснить, что в мире происходит с IE7 и моей навигационной панелью навигации.

Он отображается правильно в любом другом браузере, который я пробовал, но в 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/