IE10内容在第二次悬停时消失

时间:2014-02-20 12:18:04

标签: html css cross-browser hover internet-explorer-10

错误提示:http://jsfiddle.net/GZdqh/8/

此错误仅在Windows 7和Windows 8上的IE10中出现。在IE8,IE9或IE11上不会发生。

重新创建的步骤:

  1. 将鼠标悬停在带有下拉列表的链接上(菜单项目第1 - 2),将显示内容。
  2. 将鼠标移出下拉列表,让下拉列表消失。
  3. 将鼠标悬停在同一链接上,内容不会显示在之前的位置。
  4. 包装器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; }
    

1 个答案:

答案 0 :(得分:1)

由于您的菜单位于另一个z-index上,是否可以使用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;风格,我会留给其他人解释。