rollover menu with different images

Hi, at the moment I designed this site : http://www.mikado-webdesign.com/letsswing. In the menu on top I use a script for the rollover. I want to replace this with a css style. But, I cannot find a css tutorial how to do this. As the difference with other css rollover is that i work with different rollovers. Is this possible in css and can someone tell me how to do this?

Thanks

 

well lona, if you use dreamweaver 8 there in an option to make a css based menu with rollover and stuffs... itz quite nice..

 

Yes it is possiable and you use a pseudo-class.

Here is a better tutorial on just how to use CSS for rollovers.

CSS rollover nav bar tutorial

More nav/menu tutorials

Hope they sort you out if not give us a shout and I will see if I can explain how to do it for ya.

 

well thanks; so far I now have created this:
http://www.mikado-webdesign.com/letsswing/navitryout.html ( stupid that i am not allowed to make a live link here)
It works good, but there is one problem: My last rollover; link 6 is not vissible! can someone tell me why? I cannot seem to find what is wrong.

 

My css looks like this:
-----------
.menu {
WIDTH: 730px; HEIGHT: 51px
}
.menu1 {
BACKGROUND: url(images/banner_01.gif) no-repeat 0px 0px; FLOAT: left; WIDTH: 146px; HEIGHT: 51px
}
.menu2 {
BACKGROUND: url(images/banner_02.gif) no-repeat 0px 0px; FLOAT: left; WIDTH: 140px; HEIGHT: 51px
}
A.menu2:link {
BACKGROUND: url(images/banner_02.gif) no-repeat 0px 0px
}
A.menu2:visited {
BACKGROUND: url(images/banner_02.gif) no-repeat 0px 0px
}
A.menu2:hover {
BACKGROUND: url(images/banner_02down.gif) no-repeat 0px 0px
}
A.menu2:active {
BACKGROUND: url(images/banner_02.gif) no-repeat 0px 0px
}
.menu3 {
BACKGROUND: url(images/banner_03.gif) no-repeat 0px 0px; FLOAT: left; WIDTH: 120px; HEIGHT: 51px
}
A.menu3:link {
BACKGROUND: url(images/banner_03.gif) no-repeat 0px 0px
}
A.menu3:visited {
BACKGROUND: url(images/banner_03.gif) no-repeat 0px 0px
}
A.menu3:hover {
BACKGROUND: url(images/banner_03down.gif) no-repeat 0px 0px
}
A.menu3:active {
BACKGROUND: url(images/banner_03.gif) no-repeat 0px 0px
}
.menu4 {
BACKGROUND: url(images/banner_04.gif) no-repeat 0px 0px; FLOAT: left; WIDTH: 107px; HEIGHT: 51px
}
A.menu4:link {
BACKGROUND: url(images/banner_04.gif) no-repeat 0px 0px
}
A.menu4:visited {
BACKGROUND: url(images/banner_04.gif) no-repeat 0px 0px
}
A.menu4:hover {
BACKGROUND: url(images/banner_04down.gif) no-repeat 0px 0px
}
A.menu4:active {
BACKGROUND: url(images/banner_04.gif) no-repeat 0px 0px
}
.menu5 {
BACKGROUND: url(images/banner_05.gif) no-repeat 0px 0px; FLOAT: left; WIDTH: 99px; HEIGHT: 51px
}
A.menu5:link {
BACKGROUND: url(images/banner_05.gif) no-repeat 0px 0px
}
A.menu5:visited {
BACKGROUND: url(images/banner_05.gif) no-repeat 0px 0px
}
A.menu5:hover {
BACKGROUND: url(images/banner_05down.gif) no-repeat 0px 0px
}
A.menu5:active {
BACKGROUND: url(images/banner_05.gif) no-repeat 0px 0px
}
.menu6 {
BACKGROUND: url(images/banner_06.gif) no-repeat 0px 0px; FLOAT: left; WIDTH: 118x; HEIGHT: 51px
}
A.menu6:link {
BACKGROUND: url(images/banner_06.gif) no-repeat 0px 0px
}
A.menu6:visited {
BACKGROUND: url(images/banner_06.gif) no-repeat 0px 0px
}
A.menu6:hover {
BACKGROUND: url(images/banner_06down.gif) no-repeat 0px 0px
}
A.menu6:active {
BACKGROUND: url(images/banner_06.gif) no-repeat 0px 0px
}