html - 将鼠标悬停在子元素上时保持父元素处于事件状态

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/