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

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的悬停。