-1

我是 css 新手，获得了 2 层 css 菜单的代码，但我想要 3 层或 4 层，但它与 ul ul li ul li hover a 等有点混淆。你能帮帮我吗？我尝试了 3 天，但我只得到主菜单和正确样式的第二层......

/* Hauptmenü */

ul {
  text-align: left;
  display: inline;
  text-decoration:none;
z-index:1;
  padding: 0px 0px 0px 0px;
  list-style: none;
}
ul a {
text-decoration:none;
color: #fff;
z-index:1;
}
ul li {
  font: bold 13px/18px sans-serif;

  display: inline-block;
  height:23px;
  position: relative;
  margin: 2px 8px 0px -4px;
  padding: 1px 5px 0px 5px;
  color: #fff;
  cursor: pointer;
  z-index:1;
}

ul li:hover {
background: #db0133;
z-index:2;
}

/* Hauptmenü Ende*/







/* Untermenü 1*/
ul li ul li { 
font: normal 13px/18px sans-serif;
  background: none;
  margin: 0px 0px 0px 0px;
  display: block; 
  color: #000;
z-index:1;

}
ul li ul li:hover { 
font: normal 13px/18px sans-serif;
  background: none;
  margin: 0px 0px 0px 0px;
  color: #db0133;
  background:#f0f0f0;
  text-decoration: none;

z-index:1;

}

ul li ul {
  padding: 0;
  position: absolute;
  top: 25px;
  z-index:2;
  width: 180px;
  margin: -1px 0px 0px 0px;
  display: none;
  opacity: 1;
  visibility: hidden;
  background: #fff;
  border: 1px solid #dcdcdc;

}



ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
 z-index:2;

}
/* Untermenü 1 Ende*/






/* Untermenü 2 */


ul li ul li ul li{
  padding: 0;
  position: absolute;
  top: 25px;
  z-index:2;
  width: 180px;
  margin: 0px 0px 0px 175px;
  display: none;
  opacity: 1;
  visibility: hidden;
  background: #fff;
  border: 1px solid #dcdcdc;

}
ul li ul li:hover ul li {
  display: block;
  opacity: 1;
  visibility: visible;
 z-index:2;

}

  /*Untermenü 2 Ende */

<!-- NAVIGATION ENDE -->
4

1 回答 1

0

如果不阅读完整的代码，我很确定我知道你所说的“混淆”是什么意思。当你设置一个 ul 元素的样式时，它也会影响内部的 ul 元素，对吧？（对于 li 元素也是如此）

我向您推荐这个解决方案：

在您的 HTML 中对您的 ul - 层次结构进行分类：

<ul class="navigation-layer-0">
  <li>
      First layer
      <ul class="navigation-layer-1">
          <li>
              Second layer
              <ul class="navigation-layer-2">
                   <li>Third layer</li>
              </ul>
          </li>
      </ul>
  </li>

现在，在您的 CSS 中，您可以执行以下操作来始终设置一个图层的样式：

.navigation-layer-0 {
    /* properties for your first layer go here */
}

.navigation-layer-0 > li {
    /* properties for your first layer list-elements go here */
}

.navigation-layer-1 {
    /* properties for your second layer go here */
}

.navigation-layer-1 > li {
    /* properties for your second layer list-elements go here */
} 
/* same for third layer */

“.navigation-layer-x > li”的意思是，匹配任何 li 元素，它是元素 .navigation-layer-x 的直接子元素。

这样，您只需设置一个特定列表层的列表元素的样式。

希望这可以帮助！

于 2013-11-08T21:25:17.670 回答