How to css question

1

I need to know how to do a rollover in css. In the menu I have the following text:

<div id=“products”> <a href="#"> >> Products</a> </div>

Now my code looks like this


#products a {
 position: absolute;
 top:0px;
 left:0px;
 width:208px;
 height:29px;  
 background-image: url('../images/menu/off_bg.jpg');
 background-repeat: no-repeat;
 font-family: Arial;
 font-size: 12px; 
 font-weight: bold; 
 text-decoration: none;
 color: #000000; 
 padding-left:10px;
 padding-top:5px;
}
#products a:hover {  
 background-image: url('../images/menu/on_bg.jpg');
 background-repeat: no-repeat;
 color:#735325;
}

So here is what happens and I’ll explain what I need to have happen. What happens is when I rollover the background-image changes and the text changes color. So far so good.

But the client wants this to happen: When you rollover, the background image changes as it does now, the “Products” text changes as it does now and they want the two >> to have rollover properties as well. So how do I add rollover properties to the >> ?

here is a link: http://dev-mholland.virtualhorizons.com/

Thanks