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

【问题标题】：How to make drop-down menu appear over slideshow?如何使下拉菜单出现在幻灯片上？
【发布时间】：2013-08-27 18:21:35
【问题描述】：

我的下拉菜单直接位于幻灯片上方。因此，当我将鼠标悬停在菜单上时，子菜单会隐藏在幻灯片后面。我希望子菜单出现在幻灯片上。

幻灯片代码

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)

下拉代码

.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;
}

下拉 jQuery

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

下拉 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

我希望当您将鼠标悬停在“商店”按钮上时显示的子菜单显示在其下方的幻灯片上。他们躲在它下面。

【问题讨论】：

标签： javascript jquery html css drop-down-menu

【解决方案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;
}

使用 z-index 你可以做到这一点。

【讨论】：

已经尝试过了，只是再次尝试以确保它不起作用。
您可以发布指向您的实时页面的链接吗？

【解决方案2】：

您需要包装您的 iframe 并将该容器的 z-index 值设置为 1，并且导航容器的 z-index 值应为 2。

您还需要将这两个容器的位置属性值设置为相对。

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

此外，您可能想研究实现幻灯片的其他方法。使用 document.write 有潜在问题：Why is document.write considered a "bad practice"?

【讨论】：

【解决方案3】：

如果您按照上面的代码查看幻灯片，我不确定这将如何工作（我不太熟悉 Javascript 或它如何与 iframe 一起工作）。

但是，我也是来这里寻找答案的，所以我会发布我的解决方案，以防任何人像我一样找到这个页面。

我遇到了同样的问题，虽然我的幻灯片代码看起来像这样。

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

我发现将与幻灯片相关的所有元素的 z-index 更改为低于下拉元素是行不通的 - 直到我在 div 中制作了我的图像背景图像，如下所示：

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

糟糕的解决方法，但对我正在进行的项目来说效果很好。

【讨论】：

【解决方案4】：

用于在幻灯片上显示下拉菜单

在你写过下拉菜单代码的地方用css写代码

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

会有用的

【讨论】：