Drop down menu IE9（和IE8）下拉悬停问题
我花了很多时间研究这个话题，我没有找到解决我的问题的方法，尽管我遇到过类似的问题，但他们的方法似乎不适合我。我遇到的问题在任何非IE浏览器中都不存在。我正在构建的站点的主导航（#mainNav）当我将鼠标悬停在主a链接上以查看下拉列表时，链接的焦点似乎只集中在实际文本上。因此，当我尝试将鼠标向下移动列表时，它不会超过主链接文本，然后手转向箭头，菜单消失。这是一个CSS3菜单，在其他站点上成功运行br而且似乎没有任何IE修复程序，所以我抓起代码并决定将其用于此网站。在我将其签入IE之前，一切都进行得很顺利：/ 这些是我所看到的区域（在这种情况下通常是问题）：显示块（存在于所有“a”标记上）、删除边距和增加填充（没有帮助）、指定高度值（没有帮助）、增加行高（没有）。我在其他博客中读到，链接上没有背景色可能是问题（没有），也可以读到使用透明的1px图像就可以了（nope）。当我说“nope”时，这是假设我正确地合并了修复 我非常感谢你的帮助 以下是CSS：Drop down menu IE9（和IE8）下拉悬停问题,drop-down-menu,internet-explorer-9,Drop Down Menu,Internet Explorer 9,我花了很多时间研究这个话题，我没有找到解决我的问题的方法，尽管我遇到过类似的问题，但他们的方法似乎不适合我。我遇到的问题在任何非IE浏览器中都不存在。我正在构建的站点的主导航（#mainNav）当我将鼠标悬停在主a链接上以查看下拉列表时，链接的焦点似乎只集中在实际文本上。因此，当我尝试将鼠标向下移动列表时，它不会超过主链接文本，然后手转向箭头，菜单消失。这是一个CSS3菜单，在其他站点上成功运行br而且似乎没有任何IE修复程序，所以我抓起代码并决定将其用于此网站。在我将其签入IE之前，一切都进行
/* //////// 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 /////////// */
<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 -->
html {
position:relative;
z-index:-1000;
}
我有答案了！原来元素需要一个-1000的z索引。这就是我的问题所在。所以这就是我需要在css中添加的内容：
html {
position:relative;
z-index:-1000;
}
发布一些代码，也许？如果你的问题是小说，你将不会得到答案。我试图发布代码，但即使我缩进，它也不会接受。我知道如果我可以在那里获得代码，是否会有所帮助。在你的问题中，突出显示代码部分，然后单击“{}”'所见即所得编辑器中的按钮。谢谢！刚刚添加了代码。如果有任何问题，请告诉我。这是对您的代码的修改。IE10没有问题。我没有访问旧的MS浏览器的权限。可能会发布一些代码？如果您的问题是小说，您将无法获得答案。我试图发布代码，但它不会接受，即使我缩进。我如果我能把它放进去的话，我知道这会有帮助。在你的问题中，突出显示代码部分，然后单击所见即所得编辑器中的“{}”按钮。谢谢！刚刚添加了代码。如果有任何问题，请告诉我。这是你的代码。IE10没有问题。我没有访问旧的MS浏览器的权限。