How can I change the menu?

Hello friends,
I have a problem with the Menu "CSS style for the link!"
I have a set menu "image link" and the "mouseover" to get a frame that Menubild.
But it does not work! What am I doing wrong?

Here is the code, because I have added in template.css and I give the menu CSS-Style: menu-item

Code: Select all


.menu-item img {
  border: 1px solid #FFFFFF;
}

.menu-item img:hover {
  border: 1px solid #000000;
}

.active .menu-item {
  border: 1px solid #000000;
}




Thanks for any help!
Sakari

1. Please use override.css instead of modifying core template files. It will save you from troubles while updating.
2. Could You please post an url to your site?
3. Could you specify exactly what is the desired look you seek (screenshots might be helpful).

Hi Cyberek,

thank you first for your help!

Look please at the pictures because you can see exactly how I want it.

menu1.jpg

menu2.jpg

The website is running on the intranet and I have moved the code to the override.css.

I hope you can help me anyway!

Thank you very much!

Without accessing live site I cant help further. Perhaps you could post your site live somewhere temporarily?

I have sent you the demo access data via private mail!


Oh, you can also set the height of the menu?
You'll see that the menu screen is higher!


Thank you very much!

I give that right one? (see picture)

I've tried it, before a "#" or "." or a blank space.

How is the pure spelled correctly?

menu3.jpg

Thank you again.
regards

Sakari

How it works! (see code below)
I have changed it directly, without the entry in the "CSS style for Menu". entry!
Since I had this function does not work!

Code: Select all


.gkMenu img {
 border: 1px solid #FFFFFF;
}

.gkMenu img:hover {
 border: 1px solid #000000;
}

.gkMenu li.active > a img {
 border: 1px solid #000000;
}




If the spacing between top of the page and image is the problem, please use this css:

Code: Select all

.gkMenu img {
margin-top: 26px;
border: 1px solid #FFFFFF;
}


It should push image down.

Ok, that works too!

If I want to embed it on "CSS style for Menu" like I give exactly one so that it is integrated?
Let's say the code does not .gkMenu but .imgMenu as it is entered in the "CSS style for Menu"?

Code: Select all

/* Image Menu */

.imgMenu  img {
 border: 1px solid #FFFFFF;
margin-top: 26px;
}

.imgMenu  img:hover {
 border: 1px solid #000000;
margin-top: 26px;
}

.imgMenu  li.active > a img {
 border: 1px solid #000000;
margin-top: 26px;
}



Can you explain me bite that?

Many thanks

Do you use translator? I'm having problem understanding your point .