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

Чтобы увидеть его вживую, посетите веб-сайтognia.com.

Answer 1

Псевдоклассы

:not и :last-child не поддерживаются в IE7 / IE8. Может быть, в этом причина странного поведения. Я протестировал живой пример с использованием IE8, и последний пункт меню, кажется, работает, но не другие.

Вы можете проверить совместимость IE селекторов здесь: http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx

Надеюсь, что эта информация поможет решить вашу проблему.

EDIT:

новая идея: ваше меню отступает, когда вы проходите над слайдером, а не когда вы пропускаете первый элемент! У вас есть проблема со слоями.