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

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