0

我有一个简单的导航，在我的一个主要导航项上有一个子菜单。当用户将鼠标悬停在此时，我希望显示子菜单项，并且当您进入子菜单项时，主菜单链接仍然具有背景颜色“悬停”状态仍然处于活动状态。问题是我什至无法显示子菜单项！

我已经尝试过通常的方法display:none和时间，:hovered { display:block};但它忽略了它。

你错过了什么？一定很简单，但在 css 样式中看不到。

这是一个如何设置示例的链接：http: //jsfiddle.net/ULSsa/

4

4 回答 4

1

挺容易。子菜单ul#sub-menu不是锚元素的子菜单，而是列表元素的子菜单。您必须将子菜单放在锚元素内或检查列表元素上的悬停，如下所示：

ul#nav-1 li:hover > ul#sub-menu {代替ul#nav-1 li a:hover > ul#sub-menu {

http://jsfiddle.net/ULSsa/2/

于 2013-07-08T11:37:20.547 回答
1

只需将您的更改ul#nav-1 li a:hover > ul#sub-menu为，ul#nav-1 li:hover > ul#sub-menu因为它是子菜单li而不是锚点 ( a)。

单击此处查看示例。

如果您不知道，CSS>选择器表示元素的特定子元素。

更新

要保持链接状态，只需执行以下操作：

ul#nav-1 li:hover a {
    background-color: black;
}

单击此处查看示例。

于 2013-07-08T11:37:37.030 回答
1

您在这里使用了错误的选择器，应该是

ul#nav-1 li a:hover + ul#sub-menu { /* Note the + sign instead of > */
    display:block !important;
}

演示

说明：您正在使用>which 将选择在您的情况下为无的直接子元素a，因此您需要使用+相邻选择器来触发相邻元素

于 2013-07-08T11:37:43.870 回答
1

这是带有更正 css的演示链接 http://jsfiddle.net/ULSsa/6/

*{
    padding:0;
    margin:0;
    }
body {
    font:normal 12px/18px Arial, Helvetica, sans-serif;
    color:#000;
    padding:20px;
    background-color:#F2F2F2;
    }
ul, li, ol {
    list-style-type:none;
    }


ul#nav-1 {
    width:60%;
    height:46px;
    border:1px solid red;
}
ul#nav-1 li {
    position:relative;
    display:inline-block;
    *float:left;
    margin-top:16px;
    margin-left:-4px;
}
ul#nav-1 li a {
    padding:22px 13px;
    font-size:14px;
}
ul#nav-1 li:hover a,
ul#nav-1 li a:hover {
    cursor:pointer;
    background-color:#000;
}
ul#nav-1 li ul#sub-menu {
    display:none;
    position:absolute;
    width:200px;
    list-style:none;
    left:0;
    top:19px;
}
ul#nav-1 li:hover ul#sub-menu {
    display:block !important;
}
ul#nav-1 ul#sub-menu li {
    float: none;
    margin: 0;
}
ul#nav-1 ul#sub-menu li a {
    border-bottom:1px solid #dbddd4;
    background-color:#f2f2f2;
    width:200px;
    text-align:left;
    display: block;
    padding:0;
    padding-left:18px;
    padding-top:13px;
    padding-bottom:13px;
    float:left;
    margin:0;
}
ul#nav-1 ul#sub-menu li:hover a {
    background-color:#3a3a3a;
    color:#FFF;
}
于 2013-07-08T11:46:19.100 回答