How Do I add a Hover in the css to the images on all navbar?

Alright guys

I am in the process of adding a navigation bar to my website, I will be using images for the navigation such as home, about us, affiliates, contact me, etc..

I would like to write some code in the css that corresponds to the Navagation section that when you move the mouse over them it will change color, and then when you have selected on it changes color to..

I have attempted to do it myself.. But at the moment the hover commands only works on text, not images..



/************************************************

* Navbar *

************************************************/



#navbar {

background: url(images/navbar.jpg);

width: 920px;

height: 35px;

color: #FFFFFF;

margin: 0px auto 0px;

padding: 0px;

}

#nav {

margin: 0px 0px 0px 15px;

padding: 0px;

list-style: none;

}



#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}



#nav a {

background: #2B2B2B;

color: #FFFFFF;

display: block;

font-size: 10px;

font-weight: normal;

text-transform: uppercase;

margin: 0px 15px 0px 0px;

padding: 11px 10px 11px 10px;

}



#nav a:hover {

background: #666666;

color: #FFFFFF;

display: block;

text-decoration: none;

margin: 0px 15px 0px 0px;

padding: 11px 10px 11px 10px;

}



#nav li {

float: left;

margin: 0px;

padding: 0px;

}



#nav li li {

float: left;

margin: 0px;

padding: 0px;

width: 140px;

}



#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #2B2B2B;

width: 140px;

float: none;

margin: 0px;

padding: 8px 10px 8px 10px;

border-top: 1px solid #C0C0C0;

}



#nav li li a:hover, #nav li li a:active {

background: #666666;

padding: 8px 10px 8px 10px;

}



#nav li ul {

position: absolute;

width: 10em;

left: -999em;

}



#nav li:hover ul {

left: auto;

display: block;

}



#nav li:hover ul, #nav li.sfhover ul {

left: auto;

}

hey check out this tutorial... was a bunch of help for me....
http://www.webvamp.co.uk/blog/coding/css-image-rollovers/


or you could google css sprites

slightly more awesome solutions....



but to answer your question add background-image: url(hoverimage.gif); to your a:hover, a:active, a etc. using a different image for each... hope that makes since..
the sprite method and tutorials i provided supply a full solution to your problem, and are probably easier to follow. if you would like further explanation and don't want to use the sprite method, i can clarify what i meant wit the background-image thing if you would like...


ps. the sprites are cooler use them! :-D