摆弄错误:http://jsfiddle.net/GZdqh/8/
此错误只出现在Windows 7和8上的IE10中。不会在IE8、IE9或IE11上发生。
重建步骤:
将鼠标悬停在带有下拉菜单(菜单项1-2)的链接上,将显示内容。
将鼠标移出下拉列表并让下拉列表消失。
将鼠标悬停在同一链接上,内容不会显示在以前的位置。
包装器ul似乎出现了,但是里面没有内容。
我一直在努力寻找解决方案,这很难描述,我不确定“第二次悬停”是否足够描述,但我想不出其他任何东西。
HTML:
<header>
<nav>
<ul id="navigation">
<li class="current"><a href="#" title="Home">Home</a></li>
<li class="drop">
<a href="#" title="Menu Item 1st - 2">Menu Item 1st - 2</a>
<ul>
<li>
<a href="#" title="Menu Item 2nd - 1">Menu Item 2nd - 1</a>
<ul>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 1</a></li>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 2</a></li>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 3</a></li>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 4</a></li>
</ul>
</li>
<li>
<a href="#" title="Menu Item 2nd - 1">Menu Item 2nd - 2</a>
<ul>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 1</a></li>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 2</a></li>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 3</a></li>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 4</a></li>
</ul>
</li>
</ul>
</li>
<li class="drop">
<a href="#" title="Menu Item 1st - 2">Menu Item 1st - 3</a>
<ul>
<li>
<a href="#" title="Menu Item 2nd - 1">Menu Item 2nd - 1</a>
<ul>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 1</a></li>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 2</a></li>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 3</a></li>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 4</a></li>
</ul>
</li>
<li>
<a href="#" title="Menu Item 2nd - 1">Menu Item 2nd - 2</a>
<ul>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 1</a></li>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 2</a></li>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 3</a></li>
<li><a href="#" title="Menu Item 3rd - 1">Menu Item 3rd - 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
CSS:
header {
position: relative;
z-index: 2; }
header nav {
clear: both;
margin-bottom: 10px; }
header nav a {
font-family: "Open Sans";
font-weight: 400; }
header nav > ul {
background-color: #3a3db6;
background-image: linear-gradient(#3a3db6, #3639a3);
width: 100%;
height: 30px;
padding: 5px 0; }
header nav > ul > li > ul {
display: none;
overflow: hidden;
position: absolute;
top: 40px;
border-radius: 0 10px 10px 10px;
background: white;
background-image: linear-gradient(white 1%, #efefef 4%, white 6%);
padding: 20px 10px 10px 10px;
min-width: 600px;
box-shadow: 0px 0px 5px #333333;
z-index: 3;
column-count: 3;
column-gap: 20px; }
header nav > ul > li {
display: block;
float: left;
position: relative;
border-right: 1px solid #6165dd;
margin-right: -1px; }
header nav > ul > li:last-of-type {
border-right: 0; }
header nav > ul > li > a {
display: block;
line-height: 30px;
text-align: center;
color: white;
text-decoration: none;
font-family: "Open Sans";
font-weight: 400;
padding: 0 15px; }
header nav > ul > li > a:hover {
color: #f9c00d; }
header nav > ul > li.drop:hover {
height: 30px; }
header nav > ul > li.drop:hover > a {
position: relative;
background: white;
width: 90%;
margin-top: -10px;
height: 50px;
line-height: 50px;
border-right: 0;
border-radius: 10px 10px 0 0;
z-index: 4;
color: #3a3db6;
box-shadow: 0px 0px 5px #333333;
background-image: linear-gradient(#efefef 0, white 20%); }
header nav > ul > li.drop:hover > a:after {
content: "";
display: block;
position: absolute;
background: white;
bottom: -4px;
left: 0;
right: 0;
height: 4px; }
header nav > ul > li.drop:hover > ul {
display: block; }
header nav > ul > li.drop:hover > ul a {
display: block;
text-decoration: none;
color: #3a3db6; }
header nav > ul > li.drop:hover > ul a:hover {
text-decoration: underline; }
header nav > ul > li.drop:hover > ul > li {
padding-bottom: 10px; }
header nav > ul > li.drop:hover > ul ul a {
color: dimgrey;
font-size: 80%;
padding-left: 14px;
margin-left: 9px;
background: url(/images/nav-list.png) no-repeat left top; }
header nav > ul > li.drop:hover > ul ul li:last-of-type a {
background-position: left bottom; }
最佳答案
由于您的菜单位于另一个z索引上,是否可以使用visibility
?
这里有一个DEMO
你需要改变这两件事
header nav > ul > li > ul {
/*display:block;*/
visibility:hidden;
}
header nav > ul > li.drop:hover > ul {
/*display:block;*/
visibility:visible;
}
至于为什么IE10会破坏
display:block;
风格,在这种情况下,我将留给其他人来解释。