List item dots change color ,items themselves don't

[romsok]

Hi,

Newbie question:

I made a navigation area on the left like this:

<div id="navigation">
       <ul>
		<li><a href="home.html">Home</a></li>
		<li><a href="contact.html">Contact Us</a></li>
	</ul>
</div>

I wanted the links and the dots to change color. So in CSS I did this:

#navigation a:link
	{
		color: #000099;
	}
	
#navigation a:visited
	{
		color: #000099;
	}

#navigation a:hover
	{
		color: #0000FF;
	}
	
#navigation a:active
	{
		color: #000099;
	}

#navigation ul li
	{
		list-style-type: circle;
		line-height: normal;
		color: #000099;
	} 
	
#navigation ul li:hover
	{
		color: #0000FF;
	}

But, when I bring the cursor to the links I notice that the dots of the list items change color as soon as the mouse is on the same horizontal line as they. However, the link itself doesn't change color until I bring the cursor directly on the words like "Contact Us".

How can I make the dots and the items themselves change color at the same time - i.e. only when I put the cursor on the words themselves?

Thanx.

[Karin Sue]

Newbie answer.

I've been reading CSS books but not done much yet so I am not sure if this is correct.

If you want the entire list item, that is the words and bullets, to be the link and effected by hover effects wouldn't you put the entire list item in the anchor?

<div id="navigation">
       <ul>
		<a href="home.html"><li>Home</li></a>
		<a href="contact.html"><li>Contact Us</li></a>
	</ul>
</div>

[romsok]

Thanks Karin.

I tried this solution and there are two problems:
1. The result is the same - the <li> dot changes color when cursor is on the same line, but the text only changes color when I hover on the letters.

2. This fails XHTML validation. You are not supposed to have anything immediately inside a <ul> element except for <li> elements.