CSS dropdown menu conflict

Question

I recently purchased a theme but now I'm having problem with the dropdown menu. It goes under the description box.

Please check the site here when we go under the women shoes and keep the mouse on "boots" submenu goes down the content box. http://morestore.org/

Answer 1

Add this to your css:

#featured{
    z-index:0;
}

#header{
    z-index:100;
}

You need to add a higher z-index to the header, so it will show upside the slider. The z-index css property is an effective method for overcoming many layout challenges. You can read more about it at Smashing Magazine

Answer 2

#menu should have a z-index higher than 15 that is set for your .slide .description. Change this line in your CSS file:

#menu{position:absolute;bottom:-103px;left:0px;background:url(images/secondary-menu.png) no-repeat;width:961px;height:98px;z-index:10;}

to this:

#menu{position:absolute;bottom:-103px;left:0px;background:url(images/secondary-menu.png) no-repeat;width:961px;height:98px;z-index:20;}

I've tried it in Chrome and it then works. You can put a lot higher value for z-index in case you'll be later adding other dynamic contents like your description label and they'll have z-index over the label ;)

Answer 3

change z-index:15 to z-index:5

in

.slide .description {

}