Stumped by li a: hover

problems with text underline on mouse hover

[breaker]

So I've been trying initiate the hover psuedo class for links on my nav-bar. The code looks fine, so I'm thinking this issue may have to do with my using HTML5. I'd LOVE some help. Thanks. Here's the HTML and the CSS i'm using to style it.

<nav>
<ul>
<li><a href="/studio.html">studio</a></li>
<li><a href="/services.html">services</a></li>
<li><a href="/portfolio.html">portfolio</a></li>
<li><a href="/contact.html">contact</a></li>
</ul>
</nav>

CSS:

nav {
background-image: url(../images/backgrounds/nav_bg.png);
height: 40px;
background-repeat: no-repeat;
display: block;
}

ul{
font-family: Tahoma, Geneva, sans-serif;
margin: 0px;
padding-left: 265px;
font-size:18px;
line-height: 40px;
white-space: nowrap;
}

li{
list-style: none;
display: inline;
}

li a{
text-decoration: none;
color: #ccccbb;
padding: 7px 35px;
}

li a: hover{
text-decoration: underline;
color : #ccccbb;

}

[rocknbil]

Welcome aboard breaker. I thought this at first, then validated an html 5 doc to verify it. You're going to laugh.

Take the space out in a: hover.

:-)

The pseudo class selector is not like setting rules, spaces mean something different in a selector. My **guess** is it's parsed as an anchor pseudo class

a:

with no name (null)

which contains some element tag "hover". Like this

#container h1 a

means an element with the id of container, containing an h1, inside which there is an anchor.

The W3C CSS Validator [jigsaw.w3.org] probably would have alerted you to this too.

[breaker]

Yup! You nailed it, rocknbil. Thanks a ton! And I will familiarize myself with jigsaw.w3.org. Thanks again!