css - IE 8 在悬停时不会保持子菜单打开

Question

我的网站上有一个导航菜单，其中一个链接上有一个子菜单。当用户将鼠标悬停在父级 li 元素上时，会显示子菜单。

在现代浏览器上，这非常有效，但在 Internet Explorer 8 中，将鼠标悬停在 li 上会显示子菜单，然后在您尝试选择任何子菜单元素时立即隐藏它。这意味着子菜单变得不可用，因为您根本无法在上面选择任何内容。

我试过将子菜单直接放在 li 的下方，这样它们之间就没有间隙，但问题仍然存在。

我已将代码放入 fiddle 中，以便您自己查看问题。 使用嵌入链接在 IE 8 中正确查看。

fiddle (来源):http://jsfiddle.net/2gK5p/3/
嵌入式(最适合 IE 8 兼容性):http://jsfiddle.net/2gK5p/3/embedded/result/

这是 HTML:

<ul>
    <li class="selected"><a href="#">Home</a></li>
    <li><a href="#">Services</a>
        <ul class="subnav-wrapper">
            <span class="container block">
                <span class="subnav">
                    <li><a class="subnav-heading" href="#">Header 1</a></li>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                </span>
                <span class="subnav">
                    <li><a class="subnav-heading" href="#">Header 2</a></li>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                </span>
                <span class="subnav">
                    <li><a class="subnav-heading" href="#">Header 3</a></li>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                </span>
            </span>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

和 CSS:

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

ul {
    list-style: none;
}
li {
    float: left;
    margin: 0 8px;
}
li:hover a {
    text-decoration:none;
}
li:hover .subnav-wrapper {
      display: block; 
}
.subnav-wrapper {
  background-color: green;
  width: 100%;
  position: absolute !important;
  padding: 20px 0;
  display: none;
  top: 36px;
  left: 0;
}
.subnav-wrapper .container {
    float: none; 
}
.subnav {
    float: left;
    width: 33%;
    padding: 0 2%;
    position: relative; 
}
.subnav li {
    width: 100%;
    float: left;
    margin: 0; 
}
.subnav li a {
    width: 100%;
    float: left;
    padding: 5px 10px; 
}

.subnav li .subnav-heading {
      text-align: center;
      padding: 12px 10px;
      margin: 0 0 12px;
      font-size: 1.2em;
      color: white;
      background-color: blue; 
}

感谢您对此的任何帮助!

Answer 1

li 和 IE 的子菜单之间有一点缝隙。

您可以用伪元素填充它以增加 li 的面积: DEMO

li:after {
    content:'';
    display:block;
    height:8px;
    margin-bottom:-8px;
}