CSS Nav help

Can someone make a nav that rolls over like the existing one,

http://elite-rangers.com/WGH/

only reason why i need to change it is because its not valid and i want it to be valid.

I got 2 buttons navbut1.jpg is when they are off and navbut2.jpg is when they hover over it. any assistance would be appreciated.

I have never heard of "over"... Is that real? Just old and deprecated?

Have a look at a rollover menu using a href instead of a ul at http://nopeople.com/CSS/h_menu_with_images/index.html


Since you only have the normal and hover state images, instead of a seperate button for each link, you could consolidate by not using seperate divs for each button.

Like this - http://www.cssplay.co.uk/menus/tutorial.html

ok well i started doing it in CSS, but now its giving me a stairs effect on each button i do.

/* -- top navigation style -- */
.nav {
background: url(../images/navigation/nav_bg.jpg) repeat-x;
width:100%;
height:30px;
text-align:center;
}

a#home {
display:block;
width:118px;
height:30px;
background:url(../images/navigation/homeoff.jpg);
}
a#home:hover {
background:url(../images/navigation/homeon.jpg);
width:118px;
height:30px;
}

a#support {
display:block;
width:118px;
height:30px;
margin-left:120px;
background:url(../images/navigation/supportoff.jpg);
}
a#support:hover {
background:url(../images/navigation/supporton.jpg);
width:118px;
height:30px;
margin-left:120px;
}

a#demo {
display:block;
width:118px;
height:30px;
margin-left:240px;
background:url(../images/navigation/demooff.jpg);
}
a#demo:hover {
background:url(../images/navigation/demoon.jpg);
width:118px;
margin-left:240px;
height:30px;
}

<div class="nav">
<a href="#" id="home"></a>
<a href="#" id="support"></a>
<a href="#" id="demo"></a>
</div>

Also can u help me get it centered

.nav a{
float:left;
}

PS: add some text to your anchors and then apply a large text-indent(to hide from normal users), which may help search bots, like
.nav a{
float:left;
text-indent:-9999px
}