Question

So for whatever reason, I set a :hover pseudo-attribute on one of my divs so the hover color would be different, but it doesn’t seem to be working. I have other divs with hovers that work, so I’m not sure what the problem is (I just started learning CSS). Can someone look at my code? Thanks in advance. 🙂

Here’s my CSS, with the :hover pseudo-class that I’m having trouble with at the bottom:

#secondnavlinks ul {
display: inline;
text-align: center;
font-family: klavika-light;
list-style-type: none;
}



#secondnavlinks ul li {
display: inline;
text-align: center;
float: right;
font-family: klavika-light;
list-style-type: none;
margin-right:3%;
margin-top:17px;
white-space: nowrap;
}



#secondnavlinks ul li > a {
text-decoration: none;
color: #000000;
}​

#secondnavlinks ul li > a:hover {
color: grey;
}

And here’s the HTML, with the #secondnavlinks div which is the one I’m having trouble with:

<div id="nav">

<div id="footer">
</div>


<div id="secondnavlinks">
<ul>
<li><a href="#">Ambient Bookmarklet</a></li>
</ul>
</div>


<div id="class1">
<ul>
<li><a href="#">Saved</a></li>
<li><a href="#">Folders</a></li>
</ul>
</div>

<div id="header">
<img src="ambientfollowhead.gif" alt="ambientfollow" width="160" height="35" />
</div>



</div>

Answer 1

Try

#secondnavlinks ul li a {
text-decoration: none;
color: #000000;
}​

#secondnavlinks ul li a:hover {
color: grey;
}