Как устранить столкновение навигационной панели и навигационной панели?

Question

Как исправить меню навигации и меню выпадающего меню навигации? Выпадающее меню для «LIGHTING» столкновения с другим навигационным меню «КАТАЛОГ» (смотрите изображение ниже)

Мой код:

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

Это мои коды для навигационной панели, я попробовал использовать z-index, но он все равно не работает.

Answer 1

Z-индекс для выпадающего ul должен быть больше, чем для li.

Вы установили это (надеюсь, что есть причина для этого):

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

В этом случае ваш выпадающий перекрывается, и нуждается в более высокий Z-индекс:

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

Пожалуйста, см understanding z-index (ссылка mdn), чтобы получить представление о том, как работает z-index.