如何在不影响其父级的情况下使用 css 定位四层深度 UL答案

【问题标题】：How to target four layers deep UL with css without affecting its parents如何在不影响其父级的情况下使用 css 定位四层深度 UL
【发布时间】：2012-06-10 16:07:44
【问题描述】：

我正在使用 UL 创建下拉菜单，我做到了。除了我不能以四层深 UL 为目标，因为我假设目标路径代码会重复并且 css 会混淆。

我想定位这个ul lu ul lu ul li ul序列中的最后一个ul并告诉他不透明度：0

ul 由#menu div 包裹。因此我写道：#menu li li li ul {opacity:0} 我认为这里的 css 无法分辨 li li ul 和 li li li ul 之间的区别，因此更改也会应用于父级。

我缺少任何解决方案吗？

提前致谢。

【问题讨论】：

你有没有机会给 4 级的 li 分配一个班级？就是想。另外，ul lu ul lu ul li ul中的“lu”是什么？
我无法将类分配给 ul 或 li 本身。菜单是动态创建的。
我解决了这个问题。问题是我在 chrome 中进行测试，由于某种原因，chrome 无法进行堆叠样式读取，但 Firefox 可以。所以这让我失望了。例如，FF 可以解析 #menu li li:hover ul, #menu li li li:hover ul {}，但 Chrome 需要将它们分开在单独的行上。

标签： html css css-selectors

【解决方案1】：

这是我为我的多级下拉菜单所做的，仅使用 css.. 我希望这对你有所帮助，你可以以同样的方式添加更多级别

#menu {
    width:1000px;
    margin:0 auto;
    height:44px;
    z-index:300;
}

#menu ul {
    list-style:none;
    position:relative;
}

#menu ul li {
    float:left;
}

#menu ul li a {
    display:block;
    padding:13px 35px 13px 35px;
    text-decoration:none;
    color:#FFF;
}

#menu ul li a:hover {
    background:#4255a4 url(../images/nav_hover.jpg) bottom left repeat-x;
}

#menu ul li ul {
    position:absolute;
    top:43px;
    visibility:hidden;
    z-index:300;
    width:184px;
    height:auto;
    -moz-box-shadow: 1px 1px 10px #333;
    -webkit-box-shadow: 1px 1px 10px #333;
    box-shadow: 1px 1px 10px #333;
}

#menu ul li ul li {
    position:relative;
    float:none;
}

#menu ul li ul li a {
    padding:8px 10px 8px 10px;
}

#menu ul li:hover ul {
    visibility:visible;
}

#menu ul li ul:hover {
    visibility:visible;
}


#menu ul li:hover ul li ul{
    visibility:hidden;
}

#menu ul li ul:hover li ul{
    visibility:hidden;
}

#menu ul li ul li ul {
    position:absolute;
    top:0px;
    margin:0px 0px 0px 185px;
    visibility:hidden;
    z-index:300;
    width:184px;
    height:auto;
    -moz-box-shadow: 1px 1px 10px #333;
    -webkit-box-shadow: 1px 1px 10px #333;
    box-shadow: 1px 1px 10px #333;
}

#menu ul li ul li ul li {
    float:none;
}

#menu ul li ul li ul li a {
    padding:8px 10px 8px 10px;
}

#menu ul li ul li:hover > ul {
    display:block;
    visibility:visible;
    z-index:300;
}

#menu ul li ul li:hover ul {
    display:block;
    visibility:visible;
    z-index:300;
}

#menu ul li ul li ul:hover {
    display:block;
    visibility:visible;
    z-index:300;
}

【讨论】：