javascript 隐藏在javascript滑块后面的下拉菜单

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8651560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 04:06:46  来源:igfitidea点击:

Drop down menu hidden behind javascript slider

javascripthtmlcssdrop-down-menuoverlap

提问by Nick

Currently my nav menu's drop down portion is being hidden behind the javascript slider I have directly below it. See the problem here. How can I have the drop down menu display over the slider?

目前,我的导航菜单的下拉部分隐藏在我直接位于其下方的 javascript 滑块后面。请参阅此处的问题。如何在滑块上显示下拉菜单?

Here is some of the CSS for the two divs that contain the respective nav menu and slider.

这是包含各自导航菜单和滑块的两个 div 的一些 CSS。

Nav Menu:

导航菜单:

#nav {
width:1024px;
height:20px;
border-bottom:1px solid #ccc;
}

Slider:

滑块:

#slider {
width:1024px;
height:300px;
background: #353A33;
padding-bottom:5px;
}

Any ideas?

有任何想法吗?

回答by Cyclonecode

Try adding a z-indexto your .dropdownclass:

尝试z-index在您的.dropdown班级中添加一个:

 /* Navigation Style */
.dropdown {
  position:relative;
  font-family: arial, sans-serif;
  height:50px;
  width:100%;
  font-size:14px;
  color:#ffffff;
  background:#353A33;
  z-index:1000;
} 

回答by epi.clyce

use position:absolute with highest z-index on your nav

使用 position:absolute 在您的导航上具有最高的 z-index