Rollover Effect for Links in CSS

First, I would like to apologize for my lack of knowledge and experience in dealing with css. This is my first website and the coding may not be entirely logical.
The website is www.palousehillscomputing.com and is in the very beginning stages of its creation. What I would like to achieve is a white background for each link when it is hovered over, without moving the other links over. Ideally, I would like the white rollover to cover all empty space between the links. For example, when rolling over the "services" link, I would like the white background to start at the "products" link and at the beginning of the "about us" link (all without the links moving when doing a rollover). I hope this is somewhat clear... Here is my css:


body {background-color: #900;}


#header { width: 900px; height: 160px; padding: 0; background-image: url(../images/header.jpg);margin: auto; overflow: hidden; border: 2px solid white; z-index: 1;}
#headart { background-image: url(../images/header.png); height: 160px; width: 900px;}
#nav{ position: relative; top: 135px; left: 200px; margin: 0; padding: 0; z-index: 3;}
#nav ul { color: white; list-style: none; margin: 0; font-size: 21px; }
#nav ul li { display: inline; padding: 0 10px 0 10px;}
a.nav:link {color: white; text-decoration: none; }
a.nav:visited {color: white; text-decoration: none; }
a.nav:hover {color: #900; text-decoration: none; padding: 7px 5px 0 5px; background-color: white;}
a.nav:active {color: white; }


.main { background-color:#FEE0B8; color: #B00400; font-size: 24px; text-align:center; height: 450px; width: 900px; margin: auto; border: 2px solid white; padding: 20px 0;}

#welcome {color: black; font-size: 17px; float: left; max-width: 40%; height: auto; padding: 10px; border: solid 1px; border-color: #F00; margin: 0 20px 0 20px;}
.h3 {padding-bottom: 5px; margin: 0; }

#new { float: left; border: solid 1px red; width: 400px; height: 200px;}

#footer { height: 100px; margin: auto; width: 900px; background-image:url(../images/header.jpg); border: solid white 2px;}

Hello insafeuste,
That's a great job on your first site! :thumbsup:

I didn't check your code to see if it's valid but I'm sure you can benefit from using the validators. Have a look at the links about validation in my signature line below.

To make your menu work as you describe, I made a small change in your markup -
<div id="header">
<div id="headart">
<!--<div id="nav">-->
<ul id="nav">
<li> <a class="nav" href="http://www.hotmail.com">Home</a></li>
<li> <a class="nav" href="http://www.hotmail.com">Products</a> </li>
<li> <a class="nav" href="http://www.hotmail.com">Services</a></li>
<li> <a class="nav" href="http://www.hotmail.com">About Us</a></li>
<li> <a class="nav" href="http://www.hotmail.com">Contact</a></li>
</ul>
<!--</div>-->
</div>

</div>


And some new CSS to go along with it - body {background-color: #900;}


#header {
width: 900px;
height: 160px;
margin: auto;
padding: 0;
background: url(../images/header.jpg);
border: 2px solid #fff;
}
#headart {
height: 160px;
width: 900px;
background: url(../images/header.png);
overflow: auto;
}
/*#nav{ position: relative; top: 135px; left: 200px; margin: 0; padding: 0; z-index: 3;}*/
ul#nav {
margin: 130px 0 0 200px;
list-style: none;
}
ul#nav li {
float: left;
font-size: 21px;
}
ul#nav li a {
line-height: 30px;
display: block;
text-decoration: none;
padding: 0 25px 0 25px;
}
a.nav:link, a.nav:visited {color: #fff;}
a.nav:hover, a.nav:active {color: #900; background: white;}



.main { background-color:#FEE0B8; color: #B00400; font-size: 24px; text-align:center; height: 450px; width: 900px; margin: auto; border: 2px solid white; padding: 20px 0;}

Thank you very much, that will do the trick! I hope you dont mind if i bug you again some time down the road as I'm sure I'll be running into some new road blocks.. :o