How-To create Image Rollover in MainMenu

Hello,
I need to make a image menu with rollover where each menu-item has different images. I tried to do in the menu.css with ID´s for each single menu-item, but couldn't get it work. I guess it should work with CSS and without any JS?
Thanks for your help!
Stefan

Hi

Please show me how You've done is so far. I would use a css for this matter too.

Hi

Please show me how You've done is so far. I would use a css for this matter too.

Hi,
thanks for your reply. Here is how I tried. 102 is the menu-id of the specific menu-item called "ZAUS":
in menu.gkmenu.css:
div.gk-menu > ul.first-child >li.item102 a {
background: url(../images/envir.png) 0 0 no-repeat; height: 54px;
}

and in menu.css:
#gkMainMenu > div > ul > li.active.item102 {
background: url(../images/envir.png) 0 0 no-repeat;
}
and
#gkMainMenu li.item102 a {
background: url(../images/envir.png) 0 0 no-repeat; height: 54px;
}

Hi,
I tried the following css-code (this is for one menu-item - item id 102), which should work as far as I know. I tried this for each of the 5 menu-items, but no chance...

#gkMainMenu li.item-102 a {
background: url(../images/envir.png) 0 0 no-repeat;
}

#gkMainMenu li.item-102 a:hover {
background: url(../images/envir_a.png) 0 0 no-repeat;
}

#gkMainMenu ul li.item-102.current a, #gkMenu ul li.item-102.parent.active a {
background: url(../images/envir_.png) 0 0 no-repeat;
}

...I dont´t know into which css-file and where exactly I should enter it nor if it´s really correct.
best regards so far,
Stefan

hi there,
i finally got it by myself. you can mark this topic as solved.
here is the code how i solved it in the menu.css:

Code: Select all

#gkMainMenu { float: left; /* border-bottom: 5px solid #101010; */ width: 100%; background:transparent;}
#gkMainMenu > div > ul {  height: 65px; bottom:-30px;}
#gkMainMenu > div > ul > li:first-child { margin-left: 0; }
/*Normaler, nicht angeklickter Zustand */
#gkMainMenu ul li:nth-child(1) { background: url('healthy.png') 0 0 no-repeat; }
#gkMainMenu ul li:nth-child(2) { background: url('personally.png') 0 0 no-repeat;}
#gkMainMenu ul li:nth-child(3) { background: url('money.png') 0 0 no-repeat;}
#gkMainMenu ul li:nth-child(4) { background: url('classy.png') 0 0 no-repeat;}

/*Zustand des aktiven momentan angeklickten Links*/
#gkMainMenu ul li:nth-child(1).active { background: url('healthy_a.png') 0 0 no-repeat;}
#gkMainMenu ul li:nth-child(2).active { background: url('personally_a.png') 0 0 no-repeat;}
#gkMainMenu ul li:nth-child(3).active { background: url('money_a.png') 0 0 no-repeat;}
#gkMainMenu ul li:nth-child(4).active { background: url('classy_a.png') 0 0 no-repeat;}

#gkMainMenu > div > ul > li { height: 65px; width: 200px; -webkit-transition: background 0.12s linear; -moz-transition: background 0.12s linear; -o-transition: background 0.12s linear; transition: background 0.12s linear; overflow: visible; text-indent:-999em;}
/*Mouseover: wenn man mit der Maus über den Link fährt*/
#gkMainMenu ul li:nth-child(1):hover { background: url('healthy_a.png') 0 0 no-repeat;}
#gkMainMenu ul li:nth-child(2):hover { background: url('personally_a.png') 0 0 no-repeat;}
#gkMainMenu ul li:nth-child(3):hover { background: url('money_a.png') 0 0 no-repeat;}
#gkMainMenu ul li:nth-child(4):hover { background: url('classy_a.png') 0 0 no-repeat;}