html - How to target four layers deep UL with css without affecting its parents

Question

I am creating drop down menu using UL and I did. except I can't target four layer deep UL because as I assume target path code gets repeated and css gets confused.

I want to target last ul in this ul lu ul lu ul li ul sequence and tell him to opacity:0

ul is wrapped by #menu div. consequently I wrote: #menu li li li ul {opacity:0} I think css here can't tell the difference between li li ul and li li li ul so changes get applied to parent as well.

Any solutions that I am missing?

thanks in advance.

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