1

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

幻灯片代码

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

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

4

4 回答 4

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 您可以实现这一点。

于 2013-08-24T23:37:01.000 回答
0

如果您按照上面的代码查看幻灯片，我不确定这将如何工作（我不太熟悉 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>

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

于 2013-10-15T00:13:33.677 回答
0

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

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

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

此外，您可能想研究实现幻灯片的其他方法。使用 document.write 有潜在的问题：为什么 document.write 被认为是“不好的做法”？

于 2013-08-24T23:49:44.263 回答
0

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

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

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

它会起作用的

于 2020-07-16T08:55:32.587 回答