Как правильно управлять порядком стека моих дивов с помощью z-index?

Question

У меня есть выпадающее меню (#dropDownMenu), которое появляется, когда «#headerNav» моего веб-сайта находится над ним.Это работает должным образом, если я поместил #dropDownMenu (изначально скрытый с display: none, пока ссылка не наведена) немного поверх #headerNav div.

Останавливает небольшое мерцание, которое возникает, если курсор не перемещается достаточно быстро в раскрывающееся меню при его появлении.Слегка перекрывая #dropDownMenu над #headerNav, создается впечатление, что #headerNav по-прежнему зависает, когда курсор фактически находится в # dropDownMenu.

В любом случае, теперь я хочу скрыть перекрывающуюся часть #dropDownMenu за заголовкомили #headerContent, чтобы все выглядело аккуратнее, и чтобы выпадающее меню на самом деле выглядело так, будто оно появляется под # headerNav.

Я пробовал разные настройки z-index, и ни одна из них не работает, что довольно раздражает.Когда я устанавливаю z-index для #headerNav: hover #dropDownMenu равным -1, он скрывается за всем содержимым, как и ожидалось.

Если я устанавливаю z-index для заголовка или #headerContent на число выше, чем "#headerNav: hover #dropDownMenu ", тогда наведите курсор мыши на #headerNav, нет никакой разницы.Я по-прежнему вижу перекрывающиеся #dropDownMenu.

CSS:

header {

    position:fixed; 
    top:0;
    right:0;
    left:0;
    height: 40px;
    z-index:20;
    }

    #headerContent {
    background-color: $main-background-color;
    width: $site-width;
    margin:0px auto 0px auto;
    height:40px;

    }

    #headerNav {
    float:right;
    height:37px;
    width:auto;
    margin-top:1px;
    background-color:#464646;
    color:#cccccc;
    }

    #headerNav:hover {
    background-color:#626262;
    cursor:pointer;
    color: white;
    }

    #headerNav:hover #dropDownMenu {
    position:absolute;
    background-color:white;
    border:1px solid gray;
    top:35px;
    right:-39px;
    height:300px;
    width:200px;
    font-weight:bold;
    color:gray;
    display:block !important;
    z-index:1;
    }

    ul li { 
    float:right;
    }

    #photoThumbnail img {
    height:28px;
    width:31px;
    padding-top:5px;
    padding-right:8px;
    -moz-border-radius: 1px 12px 1px 12px;
    border-radius: 1px 12px 1px 12px;

    }

    #currentUser {
    position:relative;
    padding-top:12px;
    padding-left:12px;
    padding-right:6px;
    }


    #siteNavigation {
    display:none;

    }

HTML

<header>
  <div id='headerContent'>
    <div id='LogoHolder'>
    </div>
    <nav id='headerNav'>
      <ul>
        <li id='photoThumbnail'></li>
        <li id='currentUser'>
          <ul id='dropDownMenu'>
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
            <li>link4</li>
            <li>link5</li>
            <li>link6</li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

Примеры и исправленияБуду очень признателен.

С уважением

Answer 1

Если ваш параметр z-index игнорируется, вам, возможно, потребуется добавить свойство position, установить его в относительное значение или в другое значение Я почти уверен, что z-index игнорируется, если свойство position не установлено.

Answer 2

Я думаю, вы обнаружите, что пытаетесь разобраться с фундаментальной проблемой разметки.Обычный способ сделать выпадающие списки на основе ul это

<ul id='headerNav'>
    <li>Menu Title
        <ul class='dropDownMenu>
            <li>link1</li>
            <li>link2</li>
        </ul>
    </li>
</ul>

Таким образом, вы устанавливаете действие при наведении на #headerNav li: hover, и ваш выпадающий список является дочерним элементом вашего элемента при наведении, и меню остается открытым(и не мерцание), когда вы наводите указатель мыши на .dropDownMenu, так как он также находится в режиме мыши.Вы близки ... вам просто нужно немного лучше обернуть ваш html и настроить css так, чтобы он висел на li, показывал и скрывал "li ul.dropDownMenu"

Это должно избавить от необходимостиваше совпадение - и исправьте вашу проблему.