Question

我在我的一个主要导航项目上有一个带有子菜单的简单导航。当用户将鼠标悬停在此状态时，我希望显示子菜单项目，当您进入子菜单项目时，主菜单链接仍然具有背景颜色“悬停”状态仍然有效。事情是我甚至无法显示子菜单项目！

我尝试了通常的display:none和:hovered { display:block};，但忽略了它。

你错过了什么？必须是如此简单但却无法在css样式中看到的东西。

以下是指向如何设置示例的链接：http://jsfiddle.net/ULSsa/

Answer 1

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

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

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

Answer 2

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

See the example by clicking here

如果您不知道，CSS >选择器意味着该元素的特定子项。

更新

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

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

See the example by clicking here

Answer 3

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

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

Demo

说明：您正在使用>选择a的直接子元素，在您的情况下，这些元素都是无，因此您需要使用+相邻选择器来触发相邻元素< / p>

Answer 4

此处是demo link http://jsfiddle.net/ULSsa/6/，其中包含已更正的css

*{
    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;
}

菜单项悬停时子菜单不会显示（css html）

4 个答案:

更新