Css IE下拉菜单后退到第一项之外

我有一个纯CSS驱动的菜单，它有一些IE问题。在IE8和IE9中，如果鼠标移到第一项之外，下拉列表将后退。在7中，它隐藏在其他元素后面。（不太关心7，但我想我也应该把它放在那里）

标记遵循此基本结构。

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

---

要实时查看，请访问recognia.com。

:not

和

:last child

伪类在IE7/IE8中不受支持。也许这就是这种奇怪行为的原因。我使用IE8测试了一个实例，最后一个菜单项似乎有效，但其他菜单项无效

您可以在此处检查IE选择器的兼容性：

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

编辑：

---

新想法：当你通过滑块时，菜单正在后退，而不是当你通过第一项时！你有问题

：在IE7/IE8中不支持not

和

：last child

伪类。也许这就是这种奇怪行为的原因。我使用IE8测试了一个实例，最后一个菜单项似乎有效，但其他菜单项无效

您可以在此处检查IE选择器的兼容性：

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

编辑：

---

新想法：当你通过滑块时，菜单正在后退，而不是当你通过第一项时！你有问题

很遗憾，没有。但是谢谢你。我指的是每个菜单中的链接。当鼠标在列表上向下移动时，当你向下移动到第一项之前时，它会后退。新想法：图层问题，当你通过幻灯片时菜单会自动恢复。不，谢谢。我指的是每个菜单中的链接。当鼠标在列表上向下移动时，当你向下移动到第一个项目之外时，它将后退。新想法：图层问题，当你通过滑块时，菜单将被检索

/* 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%;
    }