Hover Elements in Nav

So this needs illustration, link: http://bradenkeith.com/lakeshore/header.php.

Left side, we've got the nav. I need to have it where when you scroll over the elements the text will turn black. Actually, if you could show me how to do this, I would love to be able to make the whole element hovered to link the page.

CSS:

/*Navigation*/
#nav ul li{
list-style:none;
display:block;
}

#nav li:first-child{
padding-top:10px;
padding-bottom:10px;
border-top:none;
}

#nav li{
padding-top:10px;
padding-bottom:10px;
border-top: #DDECFF 100% solid;
border-bottom: #DDECFF 2px solid;
margin-left:3px;
margin-right:3px;
font-size:14px;
padding-left:15px;
}

#nav li:last-child{
padding-bottom:10px;
padding-top:10px;
border-bottom:none;
}

#nav li:hover{
background:#DDECFF;
color:#000;
}

#nav a:link{
text-decoration:none;
color:#fff;
}
#nav a:hover{
text-decoration:none;
color:#000;
}

Code (markup):

		<div id="nav">
        	<ul>
            	<li><a href="#">&raquo; Home</a></li>
                <li><a href="#">&raquo; About Lakeshore</a></li>
                <li><a href="#">&raquo; Just Visiting</a></li>
                <li><a href="#">&raquo; LCF Ministries</a></li>
                <li><a href="#">&raquo; Resources</a></li>
                <li><a href="#">&raquo; Contact Us</a></li>
            </ul>
        </div>

HTML:

 

Well... first off last-child and first-child are currently miserable /fail/ since somewhere around 30% of the browsing public won't see it (aka IE6).

Second, trying to apply styling to a LI in this case (and many cases) is a miserable /FAIL/ when you've got perfectly good anchors and no child div's.

Third, :hover without a workaround on LI is pretty much pointless, again IE6's fault.

Fourth, I'm fairly certain that div around the UL is pointless.

Finally, you've got WAY too much styling for such a simple menu, which is likely why it's spacing outright strange...

Try simplifying down to something like this:

#nav {
	list-style:none;
	padding:0 3px;
	font:normal 14px/16px sans-serif;
}

#nav li {
	display:inline;
}

#nav a {
	display:block;
	height:1%; /* trip haslayout so IE will let you click ENTIRE link */
	padding:10px 0;
	border-top:2px solid #DDECFF;
}

#nav .first a {
	text-decoration:none;
	color:#FFF;
	border:0;
}

#nav a:active,
#nav a:hover {
	color:#000;
	background:#DDECFF;
}

Code (markup):

<ul id="nav">
	<li class="first"><a href="#">&raquo; Home</a></li>
	<li><a href="#">&raquo; About Lakeshore</a></li>
	<li><a href="#">&raquo; Just Visiting</a></li>
	<li><a href="#">&raquo; LCF Ministries</a></li>
	<li><a href="#">&raquo; Resources</a></li>
	<li><a href="#">&raquo; Contact Us</a></li>
</ul>

Code (markup):

Even if you were using first-child and last-child, you are redeclaring values you should only have to set once (like margin-top and margin-bottom)