问题描述
我需要有关隐藏在 div 后面的下拉菜单的帮助。我尝试将 z-index 设置为更高的值,将 li 设置为 position:relative,检查 css 中的溢出(无)。我认为这些是导致此问题的常见原因,但对我没有任何作用。
请注意,在试图找到解决方案时添加了 z-index,正数和负数。没什么区别。
注意:下拉菜单隐藏在“横幅文字”后面,但显示在“主横幅”前面。
感谢您看这个。
HTML:
<div class="wrapper">
<div class="header">
<ul class="PrimaryNav with-indicator">
<li class="Nav-item">
<a href="{% url 'index' %}">A</a>
<li class="Nav-item">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">B</a>
<ul class="dropdown-menu">
<li class="Nav-subitem"><a href="{% url 'index' %}">B.1</a></li>
<li class="Nav-subitem"><a href="{% url 'index' %}">B.2</a></li>
<li class="Nav-subitem"><a href="{% url 'index' %}">B.3</a></li>
</ul>
<li class="Nav-item">
<a href="{% url 'index' %}">C</a>
</ul>
</div>
</div>
<div class="section-wrapper">
<div class="main-banner">
<div class="text-on-banner">
<h2><strong>SOME TEXT HERE</strong></h2>
</div>
</div>
</div>
CSS:
.wrapper {
width: 100%;
}
.header {
width: 100%;
background: #26282c;
color: #f5f5f5;
text-align: center;
}
.PrimaryNav {
list-style: none;
margin: 7px auto;
max-width: 1220px;
padding: 0;
width: 100%;
font-family: 'Open Sans',sans-serif;
font-size: 130%;
font-weight: 600;
}
.with-indicator {
position: relative;
z-index: 0;
}
.Nav-item {
background: #26282c;
display: block;
float: left;
margin: 0;
padding: 0;
width: 14.28%;
text-align: center;
}
.Nav-item a {
color: #c2c5ca;
display: block;
padding-top: 20px;
padding-bottom: 20px;
text-decoration: none;
}
.Nav-subitem {
background: #26282c;
display: inline-block;
width: 100%;
text-align: center;
position: relative;
z-index: 999999;
}
.section-wrapper {
max-width: 1250px;
margin: auto;
padding: 20px 0 0 0;
}
.main-banner {
text-align: center;
font-weight: 700;
font-family: 'Titillium Web',sans-serif;
font-size: 36px;
line-height: 40px;
padding: 10px 2px 1px 2px;
color: #26282c;
Box-shadow:
inset 0 0 0 1px rgba(232,45,0.1),inset 0 0 5px rgba(232,0.2),inset -285px 0 35px white;
border-radius: 10px;
background: #fff url(banner00.jpg) no-repeat center left;
z-index: -1;
}
.text-on-banner {
font-weight: 1000;
width: 95%;
max-width: 95%;
background-color:white;
opacity:0.6;
border-radius: 10px;
z-index: -1;
}
.text-highlight {
color: #e82d00;
font-weight: 800;
}
解决方法
在这上面花了 2-3 个小时后,我才意识到是 .with-indicator ul 必须使 z-index > 0。现在一切都按预期工作。
希望这对其他人有所帮助。感谢您的关注。