CSSドロップダウンナビゲーションがInternet Explorer 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%が開きます。この方法で、サブメニューは自動的にメニュー項目の下に自動的に配置されます。私はあなたがトップからスタートし、適切にメニューを書き直すことをお勧めしますが、http://jsfiddle.net/vaGDF/2/：

#navCatTabsDropdown li ul { 
top: 100%; 
} 

はここにあなたのコードでjsFiddleや場所にすべての修正プログラムです。ここでは、私があなたがベースとして使用できるこのような別の答えのために作ったシンプルなメニューです：http://jsfiddle.net/andresilich/pc8wN/1/