在兼容模式下嘗試在IE 8中嘗試鼠標移動時，CSS菜單消失

Question

我創建了一個CSS下拉菜單，在Firefox，Chrome和IE8中運行良好，但在IE8兼容模式下失敗。當您嘗試將鼠標懸停在下拉菜單上時，它會消失。您可以在以下位置看到此問題：​​。我花了最近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是你典型的表結構：

​​

Answer 1

li:hover 

不會IE 下工作這有幾個解決方法，去谷歌上查詢！

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