html - 如何更改导航栏的颜色？

Question

我想在鼠标悬停在文本上时更改文本的颜色我试过了

li:hover
{
color:#....;
}

但它没有工作，这是我的 html

<div id="nav">
    <ul class="navigation">
        <li><a href="#"><font face="segoeui, Verdana, Tahoma" size="+1">Home</font></a></li>
        <li><a href="#"><font face="segoeui, Verdana, Tahoma" size="+1">Shop</a></font></li>
        <li><a href="#"><font face="segoeui, Verdana, Tahoma" size="+1">Blog</a></font></li>
        <li><a href="#"><font face="segoeui, Verdana, Tahoma" size="+1">Contact</a></font></li>
    </ul>
    </div>

and here's my css

#nav {
width: 100%;
height:70px;
float: left;
margin: 0 0 1em 0;
padding: 0;
background: #151515; /* Old browsers */
background: -moz-linear-gradient(left, #151515 0%, #151515 37%, #151515 47%, #1a1a1a 61%, #222222 73%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#151515), color-stop(37%,#151515), color-stop(47%,#151515), color-stop(61%,#1a1a1a), color-stop(73%,#222222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #151515 0%,#151515 37%,#151515 47%,#1a1a1a 61%,#222222 73%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #151515 0%,#151515 37%,#151515 47%,#1a1a1a 61%,#222222 73%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #151515 0%,#151515 37%,#151515 47%,#1a1a1a 61%,#222222 73%); /* IE10+ */
background: linear-gradient(to right, #151515 0%,#151515 37%,#151515 47%,#1a1a1a 61%,#222222 73%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#151515', endColorstr='#222222',GradientType=1 ); /* IE6-9 */
border-bottom: 3px solid #ccc;
}

#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 20px;
}

#nav li {
float: left;
}

#nav li a {
padding: 15px 20px;
text-decoration: none;
font-weight: bold;
color:#FFF;
}

ul.navigation {
background-color:#000;
width:200px;
height:30px;
}

这是一个 fiddle http://jsfiddle.net/jyNHm/

我希望当你将鼠标悬停在文本上时，它会产生一种很棒的颜色效果。

Answer 1

我不确定您是只想更改文本颜色还是背景。

所以这两个都是!

---

对于背景:

http://jsfiddle.net/jyNHm/5/

而不是使用

#nav li:hover {
#color:...
}

使用

#nav li:hover {
background-color:...
}

---

正文:

http://jsfiddle.net/jyNHm/6/

代替

#nav li:hover {
color:...
}

使用

#nav li a:hover {
color:...
}