我花了很多时间研究这个主题，虽然我遇到过类似的问题但我的解决方案看起来不适合我，但我找不到解决我特定问题的方法。 I＆＃34;我遇到的问题在任何非IE浏览器中都不存在。当我将鼠标悬停在主要链接上以查看下拉列表时，网站的主要导航（#mainNav），链接的焦点似乎只是在实际文本上。因此，当我尝试将鼠标向下移动到列表中时，在手转回箭头并且菜单消失之前，它不会比主链接文本更进一步。这是一个CSS3菜单，它在所有浏览器中成功地在另一个站点上运行，并且似乎没有任何IE修复，所以我抓住了代码并决定将它用于此站点。一切顺利，直到我在IE中检查它：/
这些是我看过的区域（通常是这种情况下的问题）：display-block（存在于所有＆＃34; a＆＃34;标签上），删除边距和增加填充（didn＆＃ 39; t help），分配一个高度值（没有帮助），增加了行高（nope）。我在其他博客中读到，链接上没有背景颜色可能是一个问题（nope），也读到使用透明的1px图像可以解决问题（nope）。当我说＆＃34; nope＆＃34;假设我正确地合并了修复程序。
我非常感谢你的帮助！
这是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"-32"">HDTVs 19"-32"</a></li>
<li><a href="#" title="HDTVs 37" and Up">HDTVs 37" 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 -->
答案 0 :(得分：1)
我有答案！事实证明，该元素需要z-index为-1000。这引起了我的问题。所以这是需要在我的CSS中添加的内容：
html {
position:relative;
z-index:-1000;
}