0

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

请问我在这里缺少什么？

我也一直在尝试让它在所有具有不同 hack 的浏览器中工作。如果不是所有浏览器，我怎样才能使它适用于大多数浏览器，限制在哪里？

下面是我写的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;
}

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

4

1 回答 1

1

您应该更改 li:hover 上的链接颜色。

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

JSFiddle

于 2013-08-03T08:54:09.137 回答