z-indexを使用してdivの順序付けを正しく制御するにはどうすればよいですか？

Question

ウェブサイトの「#headerNav」が表示されたときに表示されるドロップダウンメニュー（#dropDownMenu）があります。 #dropDownMenu（元々はdisplay：noneでリンクを乗り越えるまで非表示）を#headerNav div上に配置すると正しく動作します。

これは、カーソルがドロップダウンメニューに表示されたときに十分に速く移動しなかった場合に発生するわずかなちらつきを停止します。 #headerNavに#dropDownMenuをわずかにオーバーラップすると、#headerNavが#dropDownMenuに実際にカーソルを置いたときにまだ上に置かれているように見えます。

とにかく、ヘッダーまたは#headerContentの後ろに#dropDownMenuのオーバーラップ部分を隠して、すべてがきれいに見えるようにして、ドロップダウンメニューが実際に#headerNavの下に表示されるように見えます。

私はさまざまなZ-インデックス設定を試みましたが、どれもうまくいかないようです。 #headerNav：hover #dropDownMenuのz-indexを-1に設定すると、予想どおりすべてのコンテンツの後ろに隠されます。

ヘッダーのZ-インデックスまたは#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-インデックス設定が無視されている場合は、positionプロパティを追加するか、relativeに設定するか、必要なものを設定する必要があります。 positionプロパティが設定されていないと、z-indexは無視されます。

Answer 2

について。 ULベースのドロップダウンを行うための通常の方法は、あなたが#headerNav李上のホバーアクションを設定し、この方法は、この

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

です：ダウン置いて、あなたのドロップあなたのホバー要素の子であり、メニューが開いたままになります（と.dropDownMenuの上にマウスを動かすと、マウスが動かされます。あなたは近づいている...ちょうどあなたのhtmlを少し改善し、あなたのcssを調整してliを表示し、 "li ul.dropDownMenu"を表示して非表示にする必要がある

これはオーバーラップの必要性を取り除くはずです - あなたの問題を解決してください。