Я должен сказать, что я в тупик на этом! У меня есть (что я бы назвал довольно простым) многоуровневое раскрывающееся меню ul. Он отлично работает в Firefox, Opera, Chrome, Safari и т. Д., Но второй уровень меню (пример parent> child> child) не отображается во всех браузерах IE. Мне кажется, что ul, в котором находится второй уровень пунктов меню, скрыт, почти как он не может переполниться?
Вот структура меню:
<ul>
<li> <a href="#">Diamonds</a>
<ul>
<li><a href="diamond-search.php" title="Diamond Search">Search</a></li>
<li><a href="#">Education</a></li>
<li>
<a href="#">Rings</a>
<ul>
<li><a href="#">Solitaire</a></li>
<li><a href="#">3 Stone</a></li>
<li><a href="#">Eternity</a></li>
<li><a href="#">Dress Rings</a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Earings</a>
<ul>
<li><a href="#">Studs</a></li>
<li><a href="#">Hoops</a></li>
<li><a href="#">Other Earings</a></li>
</ul>
</li>
<li>
<a href="#">Pendants</a>
<ul>
<li><a href="#">Solitaire Pendants</a></li>
<li><a href="#">Other Necklaces</a></li>
</ul>
</li>
<li>
<a href="#">Braceletes</a>
<ul>
<li><a href="#">Tennis Bracelets</a></li>
<li><a href="#">Other Bracelets</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Rings</a>
<ul>
<li><a href="#">Bridal</a></li>
<li><a href="#">Eternity / Anniversary</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Sapphire</a></li>
<li><a href="#">Tanzanite</a></li>
<li><a href="#">Design a Ring</a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Jewellery</a>
<ul>
<li>
<a href="#">Earings</a>
<ul>
<li><a href="#">Children</a></li>
<li><a href="#">Creoles</a></li>
<li><a href="#">Diamond</a></li>
<li><a href="#">Fashion / Pearls</a></li>
<li><a href="#">Hoops</a></li>
<li><a href="#">Huggies</a></li>
<li><a href="#">Sapphires</a></li>
<li><a href="#">Studs</a></li>
<li><a href="#">Tanzanite</a></li>
<li><a href="#">Gold</a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Necklaces</a>
<ul>
<li><a href="#">Classic</a></li>
<li><a href="#">Fancy</a></li>
<li><a href="#">Special</a></li>
</ul>
</li>
<li>
<a href="#">Bracelets</a>
<ul>
<li><a href="#">Charm</a></li>
<li><a href="#">Children</a></li>
<li><a href="#">Classic / Fancy</a></li>
<li><a href="#">Identity</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Pendants</a>
<ul>
<li><a href="#">Children</a></li>
<li><a href="#">Cross Pendant on Chain</a></li>
<li><a href="#">Diamond / Gemstone</a></li>
<li><a href="#">Pendant on Chain</a></li>
<li><a href="#">Solitaire</a></li>
<li><a href="#">Gemstones</a></li>
<li><a href="#">Other</a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Pearls</a>
<ul>
<li><a href="#">Rings</a></li>
<li><a href="#">Strands & Pendants</a></li>
<li><a href="#">Earrings</a></li>
</ul>
</li>
<li>
<a href="#">Gents</a>
<ul>
<li><a href="#">Bracelets</a></li>
<li><a href="#">Chains</a></li>
<li><a href="#">Pendant on Chain</a></li>
<li><a href="#">Rings</a></li>
<li><a href="#">Titanium</a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Chains</a>
<ul>
<li><a href="#">Handmade</a></li>
<li><a href="#">Gents</a></li>
<li><a href="#">Ladies</a></li>
</ul>
</li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Watches</a>
<ul>
<li><a href="#">Casio</a></li>
<li><a href="#">Seiko</a></li>
<li><a href="#">Citizen</a></li>
<li><a href="#">Police</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">View all Brands</a></li>
<li><a href="#">Sunglasses & Accessories</a></li>
</ul>
</li>
<li>
<a href="#">Education</a>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Diamond Guide</a></li>
<li><a href="#">Ring Size Guide</a></li>
<li><a href="#">Watch Guide</a></li>
<li><a href="#">Precious Metal guide</a></li>
<li><a href="#">Necklace Guide</a></li>
<li><a href="#">Gemstone Guide</a></li>
</ul>
</li>
<li>
<a href="#">About us</a>
<ul>
<li><a href="#">Manufacture</a></li>
<li><a href="#">Insurance</a></li>
<li><a href="#">History</a></li>
<li><a href="#">People</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</li>
<li><a href="#">Contact us</a></li>
</ul>
А вот мое форматирование CSS:
.nav{
background:#9c9a9b;
margin-top:3px;
margin-bottom:3px;
z-index:1;
}
.nav ul{position:relative;z-index:300;}
.nav ul, .nav li{
margin:0;
pading:0;
list-style:none;
}
.nav li{
float:left;
clear:none;
}
.nav a{
position:relative;
display:block;
float:left;
clear:both;
padding:3px 10px 3px 10px;
margin:0 1px 0 0;
text-decoration:none;
font-size:1.3em;
font-weight:bold;
font-family:"Times New Roman", Times, serif;
color:#fff;
background:url(../images/img_navtile.png) center left repeat-x;
}
.nav ul li{
position:relative;
float:left;
}
.nav ul li ul{
display:none;
position:absolute;
left:0;
width:175px;
margin:36px 0 0 0;
background:url(../images/img_dropdown-tile.png) top left repeat-x #b9cdf5;
z-index:0;
}
.nav ul ul li{
position:relative;
z-index:55;
width:175px;
}
.nav ul ul li ul{
position:absolute;
left:175px;
top:-36px;
width:175px;
margin:36px 0 0 0;
background:url(../images/img_dropdown-tile.png) top left repeat-x #b9cdf5;
}
.nav ul ul a, .nav ul ul a:hover{
color:#fff;
font-size:1.1em;
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
background:none;
width:155px;
}
.nav ul ul li a:hover{
background:#1B3D65;
}
.nav a:hover{
background:url(../images/img_navtile-over.png) center left repeat-x;
}
События зависания и т. Д. Обрабатываются jQuery, и я сомневаюсь, что там есть проблема. Любая помощь будет высоко ценится, так как я отрасту седые волосы по этому поводу!