下移到子菜单时，保持顶层菜单处于悬停状态？ [英] Keeping Top level menu in hover state when moving down to sub menus?

问题描述

我有2个子级别的水平菜单。当我下移时，我想使顶层菜单保持悬停状态。

I have horizontal menu with 2 sub level. When i move down i would like to keep the Top level menu in hover state.

我创建了jsfiddle。 链接到JsFiddle

I have create jsfiddle. link to the JsFiddle

HTML代码是：

<div>
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul class="child">
                <li><a href="#">Hard Drives</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Speakers</a>
                    <ul class="child">
                        <li><a href="#">10 watt</a></li>
                        <li><a href="#">20 watt</a></li>
                        <li><a href="#">30 watt</a></li>
                    </ul>
                </li>
                <li><a href="#">Random Equipment</a></li>
            </ul>
        </li>
        <li><a href="#">Services</a>
            <ul class="child">
                <li><a href="#">Repairs</a></li>
                <li><a href="#">Installations</a></li>
                <li><a href="#">Setups</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

而CSS代码是

> body {
}
#nav li {
    list-style:none;
    float: left;
}
#nav li a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
}
#nav li a:hover {
    opacity:1;
}

/* Targeting the first level menu */
#nav {  
    min-width:850px;
    background:#fff;
    opacity:0.5;
    display: block;
    height: 34px;
    z-index: 100;
    position: absolute;
}
#nav > li > a {
}

/* Targeting the second level menu */
#nav li ul {
    color: #333;
    display: none;
    position: absolute; 
    width:850px;
}
#nav li ul li {
    display: inline;
}
#nav li ul li a {
    background: #fff;
    border: none;
    line-height: 34px;
    margin: 0;
    padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
    opacity:1;
}

/* Third level menu */
#nav li ul li ul{
    top: 0;
}
ul.child {
background-color:#FFF;  
}
/* A class of current will be added via jQuery */
#nav li.current > a {
    background: #f7f7f7;
    float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
    left:0;
    top:34px;
    display:inline;
    position:absolute;
    text-align:left;
}
#nav li:hover > ul.grandchild  {
    display:block;
}

有人可以指导我该怎么做吗？

Can somebody guide me how to do that?

谢谢。

推荐答案

从

#nav > li > a:hover

到

#nav > li:hover > a

和

#nav li ul li a:hover

至

#nav li ul li:hover > a

这篇关于下移到子菜单时，保持顶层菜单处于悬停状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！