Question

这是我的css：

.nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: table;
    width:100%;
    text-align: center;
    position: relative;
}
.nav li {
    display: table-cell;
}
.nav li a {
    background: #FF0000;
    color: #fff;
    display: block;
    padding: 7px 8px;
    text-decoration: none;
}
.nav li a:hover {
    background-color:#000;
    border:1px solid #fff;
}
.nav ul {
    display: none;
    position: absolute;
    margin-left: 0px;
    list-style: none;
    padding: 0px;
    display: table;
    width: 100%;
    left: 0;
    visibility: hidden;

}
.nav li:hover ul {
    visibility: visible;
}
.nav ul li {
    display: table-cell;
}
.nav ul a {
    display: block;
    height: 15px;
    padding: 7px 8px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #222;
}
.nav ul li a:hover {
    color: #069;
}

JSfiddle： http://jsfiddle.net/spog4sqg/3/

当鼠标悬停在HOME显示text-decoration:underline;上时，将鼠标悬停在其他剩余列表上时，显示如下：http://s7.postimg.org/br5nkl8zf/Untitled_1_copy.png

我可以知道，解决这个问题的确切css属性是什么。

提前致谢..

Answer 1

基本上这就是你要找的东西：

.navigation > ul li:first-child a:hover {
    background-color: red;
    text-decoration: underline;
}

See Example

Answer 2

我使用过：first-child伪类，希望有帮助吗？

.nav li:first-child a:hover {
    text-decoration: underline;
}

http://jsfiddle.net/w81swq5j/2/

Answer 3

我想，当你将鼠标悬停在子列表中时，你的意思是你希望悬停状态保持活动状态，而不是下划线属性。

为此，请在列表项而不是锚点上触发悬停效果。

变化：

.nav li a:hover {
    background-color:#000;
}

要：

.nav li:hover a {
    background-color:#000;
}

Updated Fiddle

的 [编辑]

希望我理解你的评论。通过'下划线'你的意思是子菜单得到背景颜色？然后将其更改为：

.nav li:hover ul li a { background-color:#000; }

Updated Fiddle 2

html5中悬停状态下的css菜单栏问题

3 个答案: