Jquery, Nivo slider overlays dropdown menu

Question

I have this website where i use both nivoslider and my ownmade dropdown menu but as it happens to be once the slider shows a picture the menu gets behinds the slideshow. It can be seen on the website im working on if you hover "Bilservice"

http://tantobil.se/

I've tried z-index and what not but i can't get it to work? is it something im missing here? all help is very much appreciated

Answer 1

to fix with chrome, try to modify your CSS stylesheet, style.css, at line 148, adding a z-index: -50;

#slideshow {
  margin-top: 30px;
  height: 270px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border-bottom: 3px solid black;
  background-color: #999;
  overflow: hidden;
  z-index: -50;
}

Answer 2

The .nivo_slice class has a higher z-index than the drop-down. If you change it so the sub-menu has a higher z-index than the .nivo_slice class it should fix it.

Answer 3

Very true, Your Z-index of "sub-category/ drop down menu" should be higher than z-index of nivoslider which is 10 by default.

just fix z-index:9999; for drop down menu and if .nivoslider has other than 10, than make sure your menu z-index is more higher than nivoslider.

Answer 4

This is correct. It is the z-index value of your menu. The menu needs to have a higher z-index value in the css than the slider.

Look in your template css and check on your menu z-index and then check:

../wp-content/plugins/easy-nivo-slider/3rd-party/nivo-slider.css

../wp-content/plugins/easy-nivo-slider/css/easy-nivo-slider.css

Just make sure your menu z-index value is higher than the slider. It worked for me.