how to css question

[Navarone]

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

[redelite]

You need to do something along the lines of.....



<div id="products">
<a href="#"><span class="arrows">>></span> Products</a>
</div>

#products a:hover .arrows {
/* something here changes */
}

[Navarone]

ah..cool! I didn't know you could do that.
Thanks

[Navarone]

Another quick question. How did you know that could be done? Are you just really smart:hugegrin: or did you try it one day and it worked or is there some document or rule of css that you can point me too that explains what you can do?

[redelite]

Ha-ha, I'm the smart person in the world, that's how!! Really though, I just tried it one day because I needed kind of the same thing you did and it worked.