IE7とCSSナビゲーションのドロップダウンで世界の何が起こっているのか把握しようとしています。CSSドロップダウンナビゲーションがInternet Explorer 7または6で正しくない
私は試したことがある他のすべてのブラウザで正しく表示されますが、IE7ではうまく落ちますが、リンク上にマウスを置くとランダムに表示されたり消えたりします。それは私を夢中にさせている!ここで
は、メニューのための私のHTMLです:ここでは
<div id="navCatTabsWrapper">
<div id="navCatTabsDropdown">
<ul>
<li><a class="category-top" href="index.php?main_page=index&cPath=39">All Products</a></li>
<li><a class="category-top" href="index.php?main_page=index&cPath=1">Dinnerware</a>
<ul>
<a href="index.php?main_page=index&cPath=11"><li>Appetizer/Dessert/Salad</li></a>
<a href="index.php?main_page=index&cPath=9"><li>Bowls</li></a>
<a href="index.php?main_page=index&cPath=40"><li>Bread & Butter</li></a>
<a href="index.php?main_page=index&cPath=12"><li>Buffet/Charger Plates</li></a>
<a href="index.php?main_page=index&cPath=10"><li>Cups/Mugs</li></a>
<a href="index.php?main_page=index&cPath=7"><li>Dinner Plates</li></a>
<a href="index.php?main_page=index&cPath=6"><li>Dinnerware Sets</li></a>
</ul>
</li>
<li><a class="category-top" href="index.php?main_page=index&cPath=3">Drinkware</a>
<ul>
<a href="index.php?main_page=index&cPath=27"><li>Acrylic</li></a>
<a href="index.php?main_page=index&cPath=42"><li>Bar Accessories</li></a>
<a href="index.php?main_page=index&cPath=41"><li>Pitchers</li></a>
<a href="index.php?main_page=index&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;
}
私は本当にアスタリスクも理解していませんでした。それは私が修正しているテンプレートです。これを修正するように見える!ありがとう。 – Reg