如何使下拉菜单出现在幻灯片上？

Question

I have my drop down menu directly above the slideshow. Because of this, the sub-menus get hidden behind the slideshow when I hover over the menu. I would like the sub-menus to appear over the slideshow.

Slideshow Code

var o=String.fromCharCode(60);var c=String.fromCharCode(62)
document.write(o+'iframe sr'+'c="http://slideful.com/vid.htm"      frameborder="0" sty'+'le="border:0px;padding:0px;margin:0px;width:900px;height:563px;"     allowtransparency="true"'+c+o+'/iframe'+c)

Dropdown Code

.tab {
  font-family: arial, verdana, san-serif; 
  font-size: 14px;
}
.asd {
  text-decoration: none;
  font-family: arial, verdana, san-serif;
  font-size: 13px; 
  color:#4234ff;
}

/*****remove the list style****/
#nav {
  margin:0; 
  padding:0; 
  list-style:none;
}   

/*****LI display inline *****/
#nav li {
  float:left; 
  display:block; 
  width:100px;
  background:#1E5B91;
  position:relative;
  z-index:500; 
  margin:0 1px;
}

/*****parent menu*****/
#nav li a {
  display:block; 
  padding:8px 5px 0 5px; 
  font-weight:700; 
  height:23px; 
  text-decoration:none; 
  color:#ffffff;
  text-align:center; 
  color:#ffeecc;
}

#nav li a:hover {
  color:#470020;
}

#nav a.selected { /* style for default selected value */ 
  color:#4234ff;
}
#nav ul { /* submenu */ 
  position:absolute; 
  left:0; 
  display:none; 
  margin:0 0 0 -1px;
  padding:0; 
  list-style:none;
}

#nav ul li {
  width:100px; 
  float:left; 
  border-top:1px solid #fff;
}

#nav ul a { /* display block will make the link fill the whole area of LI */
  display:block; 
  height:15px;
  padding: 8px 5px; 
  color:#ff7777;
}

#nav ul a:hover {
  text-decoration:underline;    
  padding-left:15px;
}

Dropdown jQuery

$(document).ready(function () { 
  $('#nav li').hover(function () {
  $('ul', this).slideDown(350); //show its submenu
  }, function () {
    $('ul', this).slideUp(350); //hide its submenu
  });
});

Dropdown HTML

<input type=hidden name=arav value="1*#*#*2">
  <ul id='nav'>
    <li><a href='#'>SHOP</a>
        <ul>
          <li style='background-color:#b0c4de;'><a href=http://link.com>Womens</a></li>
          <li style='background-color:#bebebe;'><a href=http://link.com>Mens</a></li>
        </ul>
    </li>
  </ul>
</input

I would like my submenus that are shown when you hover over the "Shop" button to show up over the slideshow that is below it. They hide under it.

Answer 1

  #nav ul { /* submenu */ 
  position:absolute; 
  left:0; 
  display:none; 
  margin:0 0 0 -1px;
  padding:0; 
  list-style:none;
  z-index:9999;
}

#nav ul li {
  width:100px; 
  float:left; 
  z-index:9999;
  border-top:1px solid #fff;
}

Using z-index you can achieve this.

Answer 2

You will want to wrap your iframe and give that container a z-index value of 1 and the navigation container should have a z-index value of 2.

You will also need to set the position property value to relative for both of these containers.

#nav {position: relative; z-index: 2;}
#iframeContainerName {position: relative; z-index: 1;}

Also, you may want to look into other ways of implementing the slideshow. Using document.write has potential issues: Why is document.write considered a "bad practice"?

Answer 3

I'm not sure how this would work if you're viewing your slideshow as in your code above (I'm not very familiar with Javascript or how this would work with iframes).

However, I came here also searching for answers, so I will post my solution in the case that it may help anyone who finds this page as I did.

I had the same issue, although my slideshow code looked like this.

<ul class="bjqs">
<li><img src="kjdsajkdhsja.png"></li>
</ul>

I found that changing the z-index to all the elements relating to the slideshow to lower than the drop down elements would not work - until I made my images background images in divs, as so:

<ul class="bjqs">
<li><div style="background-image:url(kjdsajkdhsja.png);width:200px;height:75px;"></div></li>
</ul>

Crummy workaround, but it did me fine for the project I was on.

Answer 4

For showing dropdown menu over slide show

write the code in css where you have written dropdown menu code

.dropdown_menu { visibility: visible; z-index: 100; }

it will work