CSS Menu disparaît lorsque vous essayez de passer la souris dans IE 8 en mode de compatibilité

Question

J'ai créé un menu déroulant avec CSS qui fonctionne très bien dans Firefox, Chrome et IE8, mais échoue quand en mode de compatibilité IE8. Lorsque vous essayez de passer la souris sur le menu déroulant, il disparaît. Vous pouvez voir ce problème en action au: http://chocolat.digitaldementia.ca/chocolat. J'ai passé les 4 derniers jours à essayer de trouver une solution à ce problème, mais je n'ai pas réussi jusqu'à présent.

Le code CSS se présente comme suit:

#nav { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    height: 41px; 
    /*background: url(images/menuitembackground.jpg) repeat-x;*/ 
    position: relative; 
    z-index: 500; 
    font-family: arial, verdana, sans-serif; 
} 

#nav li.top { 
    display: block; 
    float: left; 
    height: 41px; 
} 

#nav li a.top_link { 
    display: block; 
    float: left; 
    height: 40px; 
    line-height: 34px; 
    color: #ffe09a; 
    text-decoration: none; 
    font-size: 13px; 
    font-weight: bold; 
    padding: 0 0 0 15px; 
    cursor: pointer; 
    /*background: url(images/menuitembackground.png) no-repeat;*/ 
} 

#nav li a.top_link span { 
    float: left; 
    display: block; 
    padding: 0 24px 0 12px; 
    height: 40px; 
    /*background: url(three_0.gif) right top no-repeat;*/ 
} 

#nav li a.top_link span.down { 
    float: left; 
    display: block; 
    padding: 0 24px 0 12px; 
    height: 40px; 
    /* background: url(images/menuitembackground.png) no-repeat right top;*/ 
} 

#nav li:hover a.top_link { 
    color: #fff; 
    background: url(images/menuitembackground.png) no-repeat left top; 
} 

#nav li:hover a.top_link span { 
    background: url(images/menuitembackgroundright.png) no-repeat right top; 
} 

#nav li:hover a.top_link span.down { 
    background: url(images/menuitembackgroundright.png) no-repeat right top; 
} 

/* Default list styling */ 
#nav li:hover { 
    position: relative; 
    z-index: 200; 
} 

#nav li:hover ul.sub { 
    left: 1px; 
    top: 40px; 
    background: #f5d585; 
    padding: 3px; 
    border: 1px solid #dfbc6b; 
    white-space: nowrap; 
    width: 140px; 
    height: auto; 
    z-index: 300; 
    -moz-box-shadow: 5px 5px 7px #663725; 
    -webkit-box-shadow: 10px 10px 5px #663725; 
    box-shadow: 10px 10px 5px #663725; 
} 

#nav li:hover ul.sub li { 
    display: block; 
    height: 20px; 
    position: relative; 
margin: 0; 
padding: 0; 
    float: left; 
    width: 100%; 
    font-weight: normal; 
} 

#nav li:hover ul.sub li a { 
    display: block; 
padding: 0px 5px 0px 5px; 
    font-size: 11px; 
    height: 18px; 
    width: auto; 
    line-height: 18px; 
text-align: left; 
    /*text-indent: 5px;*/ 
    color: #723f2e; 
    text-decoration: none; 
} 

#nav li ul.sub li a.fly { 
    background: #bbd37e url(arrow.gif) 80px 6px no-repeat; 
} 

#nav li:hover ul.sub li a:hover { 
    background: #c89948; 
    color: #fff; 
} 

#nav li:hover ul.sub li a.fly:hover { 
    background: #6a812c url(arrow_over.gif) 80px 6px no-repeat; 
    color: #fff; 
} 

#nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul { 
    left: 90px; 
    top: -4px; 
    background: #bbd37e; 
    padding: 3px; 
    border: 1px solid #5c731e; 
    white-space: nowrap; 
    width: auto; 
    z-index: 400; 
    height: auto; 
} 

#nav ul, #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul { 
    position: absolute; 
    left: -9999px; 
    top: -9999px; 
    width: 0; 
    height: 0; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#nav li:hover li:hover a.fly, #nav li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover li:hover a.fly { 
    background: #6a812c url(arrow_over.gif) 80px 6px no-repeat; 
    color: #fff; 
    border-color: #fff; 
} 

#nav li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li:hover li a.fly { 
    background: #bbd37e url(arrow.gif) 80px 6px no-repeat; 
    color: #000; 
    border-color: #bbd37e; 
} 

Le code HTML est la structure de votre liste typique:

<div id="menucontainer"> 
    <div id="menuList"> 
     <ul id="nav"> 
      <li class="top"> <a href="#" class="top_link"><span class="down">Welcome</span></a> 
      </li> 
      <li class="top"> <a href="#" id="products" class="top_link"><span class="down">Treats</span></a> 
       <ul class="sub"> 
        <li> <a href="#">Chocolates</a> 
        </li> 
        <li> <a href="#">Coffees</a> 
        </li> 
        <li> <a href="#">Baked Goods</a> 
        </li> 
        <li> <a href="#">Gelato</a> 
        </li> 
        <li> <a href="#">Light Menu Items</a> 
        </li> 
       </ul> 
      </li> 
      <li class="top"> <a href="#" id="locations" class="top_link"><span class="down">Locations</span></a> 
       <ul class="sub"> 
        <li> <a href="#">3rd Avenue Cafe</a> 
        </li> 
        <li> <a href="#">Massey Drive Cafe</a> 
        </li> 
        <li> <a href="#">Mobile Cafe</a> 
        </li> 
       </ul> 
      </li> 
      <li class="top"> <a href="#" class="top_link"><span class="down">About</span></a> 
      </li> 
      <li class="top"> <a href="#" class="top_link"><span class="down">Contact</span></a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

li:hover 

ne fonctionnera pas sous IE Il existe plusieurs solution pour cela, recherche le sur Google!

http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=LI+Hover+IE