Multi-level ul based dropdown CSS positioning not working in all IE browsers_问答_开发者

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>
                    开发者_Python百科<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 &amp; 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 &amp; 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!

You might try implementing a CSS framework like Less to abstract away cross-browser differences and avoid having to track down these types of problems.

Also, IE implements selectors slightly differently than other browsers in my experience. It has a weird DOM/BOM filter and event handling method compared to other browsers. There might be a problem with the 2nd level child due to selector usage. Maybe adding class/id attributes to the html would help IE find the element?