IE下拉菜单在第一项之后重试

Question

我有一个纯CSS驱动的菜单，它有一些IE问题。在IE 8和9中，如果您将鼠标移到第一个项目之外，则下拉菜单会后退。在7中，它隐藏在其他元素后面。（不太在乎7，但我想我也会把它放在那里）。

标记遵循此基本结构

<nav>
  <ul>
    <li></li>
    <li>
      <ul>
        <li></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

/* Main Navigation */
nav#main-nav > .menu {
    margin: 0;
    line-height: 100%;
    padding: .4em 0;
    overflow: visible;
    position: relative;
    background: transparent url(../images/bg-element-gradient.png) repeat-x top left; /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(219,227,236,1) 10%, rgba(255,255,255,1) 50%, rgba(219,227,236,1) 90%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(219,227,236,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(90%,rgba(219,227,236,1)));
    background: -webkit-linear-gradient(top, rgba(219,227,236,1) 10%,rgba(255,255,255,1) 50%,rgba(219,227,236,1) 90%); 
    background: -o-linear-gradient(top, rgba(219,227,236,1) 10%,rgba(255,255,255,1) 50%,rgba(219,227,236,1) 90%);
    background: -ms-linear-gradient(top, rgba(219,227,236,1) 10%,rgba(255,255,255,1) 50%,rgba(219,227,236,1) 90%); 
}
nav#main-nav > .menu > li {
    padding: 0 1.9%;
    line-height: 1.5em;
    float: left;
    position: relative;
    list-style: none;
}
nav#main-nav > .menu > li:not(:last-child) {
    border-right: 1px solid #d1d1d1;
}
nav#main-nav > .menu > li.last {
    margin-right: 0;
}
/* dropdown */
nav#main-nav > .menu li.expanded:hover > ul {
    visibility: visible;
    opacity: 100;
    -webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    -ms-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */
}
/* Main-Nav: Level 2 */
nav#main-nav > .menu > li.expanded > ul {
    z-index: 100;
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
    width: 155px;
    position: absolute;
    top: 1.6em;
    left: 0;
    visibility: hidden;
    opacity: 0;
    min-width: 100%;
    border-left: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    font-size: .8em;
    line-height: 1em;
    -webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    -ms-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.95) 0%, rgba(219,227,236,0.95) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.95)), color-stop(100%,rgba(219,227,236,0.9))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.95) 0%,rgba(219,227,236,0.95) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,0.95) 0%,rgba(219,227,236,0.95) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,0.95) 0%,rgba(219,227,236,0.95) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255,255,255,0.95) 0%,rgba(219,227,236,0.95) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ffffff', endColorstr='#e6dbe3ec',GradientType=0 ); /* IE6-9 */
    }
    nav#main-nav > .menu ul li {
    float: none;
    margin: 0;
    padding: 0;
    }
    nav#main-nav > .menu > li.expanded > ul > li {
    display: block;
    padding: 0 0 1em 1.1em;
    z-index: 101;
    }
    nav#main-nav >.menu > li.expanded > ul > li:first-child {
    padding-top: 1em;
    }
    nav#main-nav > .menu > li.expanded > ul > li > a {
    width: 100%;
    display: block;
    padding: 0 1.1em .25em .25em;
    }
    nav#main-nav > .menu > li:last-child > ul {
    position: absolute;
    left: -75px;
    }
    nav#main-nav > .menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }
    html[xmlns] .menu {
    display: block;
    }
    * html .menu {
    height: 1%;
    }

要观看现场直播，请访问recommoda.com.

Answer 1

:not和:last-child伪类在IE7/IE8中不受支持。也许这就是这种奇怪行为的原因。我使用IE8测试了一个实际的例子，最后一个菜单项似乎可以工作，但其他菜单项不行。

您可以在此处检查IE选择器的兼容性：http://msdn.microsoft.com/en-us/library/cc351024（v=vs.85）.aspx

希望这些信息能帮助你解决问题。

编辑：

新想法：当你越过滑块时，菜单会后退，而不是当你越过第一个项目时！您有图层问题。