Question

我的幻灯片正上方有下拉菜单。因此，当我将鼠标悬停在菜单上时，子菜单隐藏在幻灯片后面。我希望子菜单能够显示在幻灯片上。

幻灯片代码

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

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

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

使用z-index可以实现这一目标。

Answer 2

您需要包装iframe并为该容器指定z-index值为1，导航容器的z-index值应为2.

您还需要将这两个容器的position属性值设置为relative。

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

此外，您可能希望了解实现幻灯片的其他方法。使用document.write存在潜在问题：Why is document.write considered a "bad practice"?

Answer 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>

糟糕的解决方法，但它对我正在进行的项目没有问题。

Answer 4

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

在已编写下拉菜单代码的CSS中编写代码

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

它将起作用

幻灯片显示如何显示下拉菜单？

4 个答案: