how to make a navigation item, 100% as wide as its div, when hovered?

[theprizefight]

I have a navigation list, styled in CSS, as follows:

	.navList li {font-size: 85%; color: maroon; margin-left: 0px; padding: 6px; padding-left: 3px; }
	
	.navList a:link {padding: 4px; text-decoration: none; color: maroon; text-shadow: 0 1px 3px white; border: 2px solid #fff2f2;}
	.navList a:visited {padding: 4px; text-decoration: none; color: maroon; text-shadow: 0 1px 3px white; border: 2px solid #fff2f2;}
	.navList a:hover {text-decoration: none; 
		color: white; 
		padding: 4px;
		background: maroon; 
		-moz-border-radius: 3px; 
		-webkit-border-radius: 3px;
		text-shadow: 0 1px 3px #AEB1F8;
		border: 2px solid black;
		}
	.navList a:active {text-decoration: none; color: black; background: #c9c9c9;}

and my HTML is as follows:

<div id="nav">
		<ul class="navList">
			<li><a href="index.html">Home</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="philosophy.html">Philosophy</a></li>
			<li><a href="instruction.html">Instruction</a></li>
			<li><a href="sample-work.html">Sample Work</a></li>
			<li><a href="teaching.html">Teaching</a></li>
			<li><a href="documents.html">Documents</a></li>
			<li><a href="testimonials.html">Testimonials</a></li>
		</ul>
</div>

Problem is, when hovered on, the link is only as wide as the text (well, a little bit wider, given the padding). My question is, how do I get the link to span across the entire width of the navigation bar? I have tried setting a width on a:link but this doesnt do anything. Any ideas?

Thanks in advance.

 

[Me1000]

Add something like this, and tell me if that's what you're looking for...

.navList a{display: block; width:200px;}

 

[theprizefight]

yess, thank you sir, that did the trick. I tried the .navList a{width:200px} but forgot to declare block.

thanks again!

 

[Me1000]

You're most certainly welcome!

 

[Got Josh?]

can we see this in action ?