如何修复导航栏和导航下拉列表冲突？

Question

如何修复导航菜单和导航下拉菜单冲突？ ＆＃34; LIGHTING＆＃34;的下拉菜单与另一个导航菜单冲突＆＃34; CATALOG＆＃34; （见下图）

我的代码：

    #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

下拉ul的z-index应该大于li的z-index。

你设定了这个（希望有这个原因）：

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

在这种情况下，您的下拉列表重叠，并且需要更高的z-index：

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

请参阅understanding z-index（mdn链接），了解z-index的工作原理。