Меню CSS исчезает при попытке мыши в IE 8 в режиме совместимости

Question

Я создал раскрывающееся меню с CSS, которое отлично работает в Firefox, Chrome и IE8, но сбой при использовании в режиме совместимости IE8. Когда вы пытаетесь навести курсор мыши на раскрывающееся меню, оно исчезает. Вы можете увидеть этот вопрос в действии по адресу: http://chocolat.digitaldementia.ca/chocolat. Последние 4 дня я пробовал найти исправление для этой проблемы, но пока не увенчался успехом.

код CSS выглядит следующим образом:

#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; 
} 

HTML, ваш типичный список структура:

<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 

не будет работать под IE Есть несколько обходной путь для этого, погугли это!

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