CSS Rollover

Im creating a top navigational bar, and I seem to be having to problems with a roll over effect.

I'm trying to create a background colour appear behind the text when the cursor rolls over it.

I am also trying to do the same thing again, but this time I only want a bottom-border to be shown in my specified colour when the cursor rolls over the text.

I don't know whether this will help.:D

Useful URL http://wellstyled.com/css-nopreload-rollovers.html

My website might also help.

http://www.exitfegs.co.uk/steve.html

This menu uses css to produce a picture when a thumbnail is hovered over.

Frank - alias effpeetee:thumbsup:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
height:700px
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

div#thumbnails {
position: absolute;
bottom: 0;
left: 0;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left:550px;
top:1150px
border: 1px dashed gray;
visibility:hidden;
color: black;
text-decoration: none;
text-align:center;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 150px;
left: 90px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

for creating rollovers with CSS, this is what I do....I think this is what you are asking about:


#button1 a:link {background-color: blue; border: none;}
#button1 a:visited {background-color: blue; border: none;}
#button1 a:hover {background-color: red; border-bottom: 1px solid black;}
#button1 a:active {background-color: red; border-bottom: 1px solid black;}


hope this is what you are asking about.