下拉菜单隐藏在滑块后面

Question

I have a web site http://www.jccaspen.com/templates/section_cdo/aid/2644906/jewish/Ski-to-Live.htm , there is a drop down menu for About Us tab, but when you hover on drop down , it displays behind the image slider (you can see menu if you click on the About Us tab and hover over it)

I know the problem is with the slider, with images in particular. I tried changing overflow to visible, but it gives no effect. Please help

Answer 1

Set to this class .bannercontainer z-index:1

.bannercontainer {
    position: relative;
    margin: 0 auto;
    padding: 15px;
    background-color: #000;
    max-width: 1140px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    z-index: 1; /*Add this */
}

Answer 2

You need to give the menu a higher z-index than the slider. It also has to be positioned for it to work.

Add this and it should work:

div#chabad_head .chabad_navigator_bar {
  position: relative;
  z-index: 3;
}

Answer 3

Do the following change in your code. It will work for you. I have tested it myself. It is the problem of z-index .

<div class="chabad_menu_content" style="z-index: 10000">
.
.
.
.
</div>