Question

我有这个css代码：

.nav li li a { /* sub menu list */
    display: block;
    background: #F36F25;
    position: relative;
    z-index:100;
    border-top: 1px solid #ffffff;
}
.nav > li > ul > li.hover > a { /* sub menu list hover */
    background:#FFFFFF;
}
.nav > li > ul > li.hover > ul > li { /* sub sub menu list hover */
    background:#F36F25;
}

如何在将鼠标悬停在子项上时确保父项保持活动状态？

另外，如何让一个活动的类为父项工作，如果一个子项具有活动类，我希望父项和子项具有指定的类

Answer 1

我们有这个HTML：

<div id="nav">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub menu</a></li>            
            <li><a href="#">Sub menu</a></li>            
            <li><a href="#">Sub menu</a></li>            
            <li><a href="#">**Sub menu</a>
                <ul>
                    <li><a href="#">Sub menu</a></li>
                    <li><a href="#">Sub menu</a></li>
                    <li><a href="#">Sub menu</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

这个CSS：

* {margin: 0 auto; padding: 0;}
a{text-decoration: none;}
#nav ul {
    list-style-type: none;
    height: 32px;
    background:#333;
    width: auto;
}
#nav ul li {
    float: left;
    height: 32px;
    position: relative;
}
#nav ul li a {
    float:left;
    line-height: 32px; 
    color:#fff;
    padding: 0 7px;
}
#nav ul li:hover {background:#ff6600;}
#nav ul li:hover > ul {display: block;}
#nav ul li ul {
    display: none;
    position: absolute;
    top: 32px;
    left: 0;
    width: 100px;
    height: auto;
}
#nav ul li ul li, #nav ul li ul li a {
    float: none;
    display: block;
}
#nav ul li ul li ul {
    top: 0;
    left: 100px;
}

这是演示链接： http://jsfiddle.net/ebadgh/c4x7gwvw/

将鼠标项目悬停在子项目上时保持活动状态

1 个答案: