nav barとnavのドロップダウンクラッシュを修正するにはどうすればよいですか？

Question

ナビゲーションメニューとナビゲーションのドロップダウンメニューの衝突を修正するにはどうすればよいですか？私は、

#navigation { 
     position: relative; 
     text-align:center; 
     display: inline-block; 
     margin: 0 auto; 
     width: 100%; 
     float: left; 
     {% unless settings.use_logo_image %}line-height: 40px;{% endunless %} 
    } 


    ul#nav { 
     font-family: {{ settings.navigation-font }}; 
     background: {{ settings.navigation }}; 
     list-style: none; 
     line-height: 40px; 
     margin: 0 auto; 
    } 

    ul#nav li { 
     display: inline-block; 
     position: relative; 
     margin: 0 auto; 
     z-index: 8; 
    } 

    ul#nav li:hover { 
     color: {{ settings.nav_hover_link_color }}; 
     background: {{ settings.nav_hover_color }}; 
    } 

    ul#nav li a { 
     font-size: {{ settings.nav_size }}; 
     font-weight: {{ settings.nav_weight }}; 
     color: {{ settings.nav_color }}; 
     height: 40px; 
     display: block; 
     padding: 0 15px; 
     text-transform: {{ settings.navigation-transform }}; 
     line-height: 40px; 
     margin: 0 auto; 
     letter-spacing: 1px; 
    } 

    ul#nav li a:hover { 
     background: {{ settings.nav_hover_color }}; 
     color: {{ settings.nav_hover_link_color }}; 
     text-decoration: none; 
    } 

    ul#nav li ul{ 
     display: none; 
     float: left; 
     position: absolute; 
     top: 34; 
     left: 0; 
     z-index: 5; 
     margin: auto; 
     padding: 0; 
     border: 1px solid {{ settings.dotted_color }}; 
     list-style-type: none; 
    } 

    ul#nav li ul:before { 
     content: ''; 
     display: block; 
     position: absolute; 
     left: 50%; 
     border-color: transparent transparent {{ settings.dotted_color }} transparent; 
     border-style: solid; 
     border-width: 8px; 
     margin-left: -8px; 
     bottom: 100%; 
     width: 0; 
     height: 0; 
    } 


    ul#nav li:hover ul{ 
     display: block; 
     background: {{ settings.dropdown_background_color }}; 
    } 

    ul#nav li ul li{ 
     background: {{ settings.navigation }}; 
     color: {{ settings.nav_dropdown_color }}; 
     min-width: 150px; 
     width: 100%: 
     white-space: nowrap; 
     float: left; 
     text-align: left; 
    } 


    ul#nav li ul li:hover { 
     background: {{ settings.dropdown_hover_background_color }}; 
    } 

    ul#nav li ul li a:hover { 
     color: {{ settings.dropdown_hover_link_color }}; 
     background: {{ settings.dropdown_hover_background_color }}; 
    } 

    ul#nav li ul li a{ 
     text-align: left; 
     padding-left: 10px; 
     color: {{ settings.nav_dropdown_color }}; 
     text-transform {{ settings.dropdown-transform }}! important; 
    } 

これは、ナビゲーションバーのための私のコードは次のとおりです。 別のナビゲーションメニューの「カタログ」と「LIGHTING」衝突のためのドロップダウンメニューは

私のコードは、（下の画像を参照してください） z-indexを使ってみましたが、まだ動作しません。

Answer 1

ドロップダウンulのzインデックスは、liのzインデックスより大きくする必要があります。

あなたは（この理由はそこにあると思います）これを設定している：あなたのドロップダウンは重なり、高Zインデックスを必要と

ul#nav li { 
    display: inline-block; 
    position: relative; 
    margin: 0 auto; 
    z-index: 8; 
} 

た場合：

ul#nav li:hover ul{ 
    display: block; 
    background: {{ settings.dropdown_background_color }}; 
    z-index: 9; 
    position: relative; 
} 

understanding z-indexを参照してください。 （mdnリンク）を使って、z-indexがどのように機能するかをよりよく理解してください。