IE9（和IE8）下拉懸停問題

Question

我花了很多時間研究這個主題，即使我遇到過類似的問題，但他們的解決方案似乎並不適合我的。我遇到的問題在任何非IE瀏覽器中都不存在，當我將鼠標懸停在主鏈接上查看下拉菜單時，我正在構建的網站的主導航欄（#mainNav），鏈接的焦點似乎只是在實際的文本上，所以當我試圖將鼠標移動到列表中時，它只會在主要鏈接文本沒有進一步顯示，然後手再次回到箭頭並且菜單消失，這是一個CSS3菜單，它是在所有瀏覽器上成功地在另一個網站上工作，並且似乎沒有任何IE修復程序，所以我抓住代碼並決定將其用於此網站。是我看過的區域（通常是這種情況下的問題）：display-block（存在於所有「a」標籤上），刪除的邊距和增加的填充（沒有幫助），分配了高度值（沒有幫助），增加了行高（不行）在其他博客中讀到鏈接上沒有背景顏色可能是一個問題（不會），也讀到使用透明的1px圖像將做的伎倆（不）。當我說「不行」時，假設我正確地合併了修復。

非常感謝您的幫助！

這裏是CSS：

/* //////// MAIN NAVIGATION //////// */ 

/* Reset */ 
#navMain, 
#navMain ul, 
#navMain li, 
#navMain a { 
    border:none; 
    font-weight:normal; 
    margin:0; 
    outline:none; 
    padding:0; 
    z-index:1000; 
} 

/* Menu */ 

#mainNav-wrap { 
    width:100%; 
    height:47px; 
    float:left; 
    background:#00aeef; 
    border-top:#014964 1px solid; 
    box-shadow: 0px 2px 2px #999999; 
} 

#navMain { 
    /*height:40px;*/ 
    width:960px; 
    position:relative; 
    z-index:500; 
    margin:0 auto; 
    } 

#navMain li { 
    display:block; 
    float:left; 
    height:40px; 
    list-style:none; 
    /*padding:40px 8px 0 4px;*/ 
    position:relative; 
    text-transform:uppercase; 
    } 

#navMain li li { 
    text-transform:capitalize; 
} 


/* Links */ 
#navMain li a { 
    border-radius:5px; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    color:#fff; 
    display:block; 
    font-size:18px; 
    line-height:18px; 
    font-family:'Raleway', sans-serif; 
    padding:15px 19px; 
    text-decoration:none; 
    text-shadow:0px 1px 1px rgba(0,0,0,.1); 
    transition:color .2s ease-in-out; 
    -webkit-transition:color .2s ease-in-out; 
    -moz-transition:color .2s ease-in-out; 
    -ms-transition:color .2s ease-in-out; 
    -o-transition:color .2s ease-in-out; 
    } 
    #navMain li:first-child a {border-left:none;} 
    #navMain li:last-child a{border-right:none;} 
    #navMain li:hover > a {background:#565454;color:#fff200;} 

/* Sub Menu */ 
#navMain ul { 
    background: #565454; 
    border-radius: 0 5px 5px 5px; 
    -moz-border-radius: 0 5px 5px 5px; 
    -webkit-border-radius: 0 5px 5px 5px; 
    position:absolute; 
    left: 0; 
    top: 46px; 
    opacity: 0; 
    filter: alpha(opacity = 0); 
    transition: opacity .25s ease .1s; 
    -moz-transition: opacity .25s ease .1s; 
    -ms-transition: opacity .25s ease .1s; 
    -o-transition: opacity .25s ease .1s; 
    -webkit-transition: opacity .25s ease .1s; 
    min-width:200px; 
    } 

    #navMain ul.electronics { 
     min-width:350px;  
    } 

    #navMain li:hover > ul {opacity:1;filter: alpha(opacity = 100);} 

#navMain ul li { 
    height:0; 
    overflow:hidden; 
    padding:0; 
    transition: height .25s ease .1s; 
    -moz-transition: height .25s ease .1s; 
    -ms-transition: height .25s ease .1s; 
    -o-transition: height .25s ease .1s; 
    -webkit-transition: height .25s ease .1s; 
    } 
    #navMain li:hover > ul li {height:38px;overflow:visible;padding:0;} 

#navMain ul li a { 
    border:none; 
    color:#fff;display:block; 
    font-size:18px; 
    margin:4px 4px; 
    padding:8px 14px 8px 14px; 
    white-space:nowrap; 
    width:200px; /* Stretches Submenu */ 
    } 
    #navMain ul li:last-child {margin-bottom:6px;} 
    #navMain ul li:last-child a {border:none;padding:4px 14px 1px 14px;} 
    #navMain ul li a:hover {background:none;} 
    #navMain ul li span {white-space:nowrap;} 

    .navMain_buffer {height:8px;} 


/* ////////// MAIN CONTENT /////////// */ 

下面是HTML：

<div id="mainNav-wrap"> 
<ul id="navMain"> 
      <li><a href="#" title="Electronics">ELECTRONICS</a> 
           <ul class="electronics"> 
           <li><a href="#" title="HDTVs 19&quot;-32&quot;">HDTVs 19&quot;-32&quot;</a></li> 
           <li><a href="#" title="HDTVs 37&quot; and Up">HDTVs 37&quot; and Up</a></li> 
           <li><a href="#" title="Gaming Systems">Gaming Systems</a></li> 
           <li><a href="#" title="HOME THEATER">Home Theater</a></li> 
           <li><a href="#" title="Stereos and Home Theater Systems">Stereos and Home Theater Systems</a></li> 
           <li><a href="#" title="Digital Cameras and Camcorders">Digital Cameras and Camcorders</a></li> 
           <li><a href="#" title="Digital Cameras and Camcorders">Small Electronics</a></li> 
          </ul> 
        </li> 
      <li><a href="#" title="Computers">Computers</a> 
           <ul> 
           <li><a href="#" title="Laptops">Laptops</a></li> 
           <li><a href="#" title="Tablets">Tablets</a></li> 
           <li><a href="#" title="Desktops">Desktops</a></li> 
           <li><a href="#" title="Computer Desks">Computer Desks</a></li> 
          </ul> 
        </li> 
      <li><a href="#" title="Appliances">APPLIANCES</a> 
           <ul> 
           <li><a href="#" title="Washer and Dryers">Washer and Dryers</a></li> 
           <li><a href="#" title="Refrigerators">Refrigerators</a></li> 
           <li><a href="#" title="Freezers">Freezers</a></li> 
           <li><a href="#" title="Ranges">Ranges</a></li> 
          </ul> 
        </li> 
      <li><a href="#" title="Bedrooms">Bedrooms</a> 
           <ul> 
           <li><a href="#" title="Bedroom Sets">Bedroom Sets</a></li> 
           <li><a href="#" title="Kid's Bedrooms">Kid's Bedrooms</a></li> 
           <li><a href="#" title="Mattresses">Mattresses</a></li> 
          </ul> 
        </li> 

        <li><a href="#" title="Dinning Rooms">Dinning Rooms</a></li> 

        <li><a href="#" title="Living Rooms">Living Rooms</a> 
           <ul> 
           <li><a href="#" title="Recliners">Recliners</a></li> 
           <li><a href="#" title="Sectionals">Sectionals</a></li> 
           <li><a href="#" title="Living Room Sets">Living Room Sets</a></li> 
           <li><a href="#" title="Accessories">Accessories</a></li> 
           </ul> 
        </li> 
     </ul> 
     </div><!-- /END main-nav-wrap --> 

Answer 1

我有答案！事實證明，元素需要一個-1000的z-索引。這是我的問題。所以這是什麼需要加入我的CSS：

html { 
position:relative; 
z-index:-1000; 
}