html - 如何为项目和其中的链接制作相同的悬停样式？

Question

我正在尝试制作一个基于列表（ul）和左浮动的菜单。所以每一个都会有一个链接li。但是在链接的悬停中，li链接变成了透明颜色，并且每个li都有一个带有背景图像的特定 ID。

我做了一半，但链接悬停和li hover. 在这里查看我的代码：http: //jsfiddle.net/mhhbs/

这是我所说的悬停图像的图像。

无论如何，这是我的代码：

#nav {
    font: 30px 'LeagueGothicRegular', Arial, sans-serif;
    color: #f9f8cc;
    width:450px;
    clear: both;
    height: 56px;
    margin: 0px 0px 0px 50px;
    background:#c2c2c2;
}

#nav ul {
    margin: 0;
    padding: 0;
}

#nav li {
    list-style-type: none;
    background-image: transparent;
    color: #FDE99D;
    float: left;
    height:50px; width:100px;
    border-right:1px #900 solid;
    text-align:center;

}

#nav li a {
    /**padding:10px 20px 10px 16px;**/
    color: #000;
    text-shadow: 0px 2px 2px #222;
    text-transform: uppercase;
}

#nav li a:hover {
    color: #999;
    color:transparent !important;
    text-shadow: none;
}

#nav li:hover {
    background:url(http://cdn1.iconfinder.com/data/icons/duesseldorf/32/home.png) red; 
    background-size: 83px 56px; 
    color: #999;
    color:transparent !important;
    text-shadow: none;
}

Answer 1

代替

#nav li a:hover {

和

#nav li:hover a {

http://jsfiddle.net/mhhbs/1/

这样，两种样式都基于li.