# How to css question

**URL:** <https://forum.kirupa.com/t/how-to-css-question/266794>\
**Category:** Uncategorized\
**Created:** [July 24, 2008, 12:52pm UTC](https://forum.kirupa.com/t/how-to-css-question/266794 "2008-07-24T12:52:17Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Navarone](https://avatars.discourse-cdn.com/v4/letter/n/f9ae1b/32.png) [@Navarone](https://forum.kirupa.com/u/Navarone)\
**Post date:** [July 24, 2008, 12:52pm UTC](https://forum.kirupa.com/t/how-to-css-question/266794/1 "2008-07-24T12:52:17Z")

</div>

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

```auto

#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/](http://dev-mholland.virtualhorizons.com/)

Thanks