I must say that I am stumped on this one! I have a (what I'd call rather simple) ul based multi level dropdown menu. It works perfectly in Firefox, Opera, Chrome, Safari etc but the second level of menus (example parent > child > child) fails to show in all IE browsers. It seems to me like the ul that houses the second level of menu items is hidden, almost like it cannot overflow?
Here is the menu structure:
<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>
And here is my CSS formatting:
.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;
}
The hover events etc are handled by jQuery and I doubt there is an issue there. Any help would be much appreciated as I am growing grey hairs over this!