Question

我一直在用css重做一个垂直菜单，如下面的代码所示，在第一个子菜单选项和第一个和第二个菜单选项上，我似乎无法获得第一个菜单选项保持活动状态在第三个子菜单上保持活动状态。

我在这里想念的是什么？

我也一直试图让它在所有具有不同黑客的浏览器中运行。如何让它适用于大多数浏览器（如果不是所有浏览器）以及限制在哪里？

以下是我写的css：

#nav li a {
    display:block;
    width:250px;
    height:30px;
    color:#FFF;
    background-color: #33b4d4;
    text-decoration:none;
    font-size:1em;
    line-height:1.8em;
    font-weight:bold;
    border:1px solid #000;
    text-indent:20px;
}

#nav li a:hover {
    display:block;
    color:#33b4d4;
    background-color: #FFF;
}

#nav ul.menu {
    display:block;
    width:250px;
    margin:0;
    padding:0;
    list-style-type: none;
}
#nav ul.menu > li, #nav ul.menu ul > li , #nav ul.menu ul > li > ul > li {
    float: left;
    display:block;
    width:250px;
    height:30px;
    background-color: #33b4d4;
    text-indent:20px;
}
#nav ul.menu ul ul li {
  float: none;
}
#nav li > ul {
  display: none;
}
#nav li:hover > ul {
    position: absolute;
    display:block;
    width:250px;
    padding:0;
    margin-top:-22px;
    margin-left:220px;
}

以下是菜单：

        <div id="nav">
            <ul class="menu">
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
            </ul>

我尝试过改变：

#nav li a:hover {
    display:block;
    color:#33b4d4;
    background-color: #FFF;
}

要：

#nav ul.menu > li:hover a {
    display:block;
    color:#33b4d4;
    background-color: #FFF;
}

但是现在父链接保持活动状态，但所有子菜单链接也同时处于活动状态。我错过了什么？

Answer 1

您应该更改li：hover。

上的链接颜色

#nav li:hover > a {
    display:block;
    color:#33b4d4;
    background-color: #FFF;
}

JSFiddle

垂直菜单与子菜单，但父链接不保持活动状态

1 个答案: