IE10第二次悬停时内容消失

Question

错误的演示链接: http://jsfiddle.net/GZdqh/8/

这个问题似乎只会在Windows 7和8上的IE10中出现，而不会在IE8、IE9或IE11中发生。

重现步骤:

1. 将鼠标悬停在带有下拉菜单的链接上（第一项菜单-2），内容将出现。
2. 将鼠标移出下拉菜单并让其消失。
3. 再次悬停在相同的链接上，此时内容不会像之前那样出现。

外层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; }

- Harry Potts

Answer 1

由于您的菜单在另一个z-index上，是否可以使用visibility代替？

这里是一个演示

您需要更改这两个内容。

header nav > ul > li > ul {
    /*display:block;*/
    visibility:hidden;
}

header nav > ul > li.drop:hover > ul {
    /*display:block;*/
    visibility:visible;
}

关于为什么IE10在这种情况下会混乱display:block;样式，我将留给其他人解释。

- Niklas

---

太棒了，从未考虑过这个选项，非常感谢。希望有人能解释一下为什么 display: block; 没有起作用，我真的很想知道。 - Harry Potts

@HarryPotts - 我也想知道！你应该暂时将此标记为已接受的答案，直到有人来解释得更好。 - Niklas