带有悬停的 CSS 菜单

Question

我试图让我的菜单链接 #666666 然后在 hover 上让它成为 #FFFFFF

我希望这些颜色在 text colour 和 top border 上改变

http://jsfiddle.net/4Xdkn/

#topbar {
    width:100%;
    height:80px;
    background-color:#000000;
}
#topbar-inner {
    width:1000px;
    margin:0 auto 0 auto;
}
#logo {
    display:inline;
    float:left;
    margin-top:20px;
}

#menu {
    display:inline;
    float:right;
}
#menu > ul > li {
    display:inline-block;
    border-top:4px solid #666666;
    margin-right:20px;
    padding-top:20px;
    min-width:120px;
}
#menu > li {
    display:inline-block;
    list-style:none;
    margin-top:25px;
    margin-left:auto;
    margin-right:auto;
}
#menu > li:hover {
    color:#FFFFFF;
}

Answer 1

选择器应该是

#menu li a {
    color: #666;
    display: block;
}
#menu li:hover {
    border-top-color: #FFF;
}
#menu li:hover a {
    color:#FFFFFF;
}

#menu 没有直接的 li 后代，所以 #menu > li:hover 不匹配任何东西。

http://jsfiddle.net/4Xdkn/8/