导航下拉列表重叠不能使z-index正确
我使用Bootstrap，我遇到了下拉菜单问题。 我有一些JS会改变下拉列表的位置，如果它会到达窗口的边缘。它将它移动到父下拉列表的另一侧。问题是下拉列表与根下拉列表重叠，并且z-index已关闭。
我试过调整我能想到的所有内容的z-index而没有任何成功。有什么想法吗？
HTML：
<header>
<div class="container-fluid container-nav">
<div class="container container-wo-pad">
<div class="header-home">
<div class="site-title">
<a href="/"><img class="logo" src="">
<h1>Site</h1></a>
</div>
</div>
<!-- navigation object : U Navigation Items -->
<div class="nav">
<div class="navControl">
<a class="nav-btn" href="#"><i class="fa fa-bars" aria-hidden="true"></i> Navigation</a>
</div>
<ul class="nav-root">
<li class="has-sub nav-root-item">
<a href="">LinkLinkLinkLink <span class="show-carrot">▾</span> </a>
<span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
<ul class="dropdown sub-drop">
<li><a href="">Link</a></li>
<li class="has-sub">
<a href="">Link <span class="show-carrot">▾</span> </a>
<span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
<ul class="dropdown sub-drop">
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</li>
<li class="has-sub">
<a href="">Link <span class="show-carrot">▾</span> </a>
<span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
<ul class="dropdown sub-drop">
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li class="has-sub">
<a href="">Link <span class="show-carrot">▾</span> </a>
<span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
<ul class="dropdown sub-drop">
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</li>
<li class="has-sub">
<a href="">Link <span class="show-carrot">▾</span> </a>
<span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
<ul class="dropdown sub-drop">
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</li>
<li class="has-sub">
<a href="">Link <span class="show-carrot">▾</span> </a>
<span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
<ul class="dropdown sub-drop">
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</li>
<li><a href="">Link</a></li>
<li><a href="" target="_blank">Link</a></li>
</ul>
</li>
<li class="has-sub nav-root-item">
<a href="">This one <span class="show-carrot">▾</span> </a>
<span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
<ul class="dropdown sub-drop">
<li class="has-sub">
<a href="">Then this one <span class="show-carrot">▾</span> </a>
<span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
<ul class="dropdown sub-drop">
<li><a href="">Link</a></li>
<li class="has-sub">
<a href="">Link <span class="show-carrot">▾</span> </a>
<span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
<ul class="dropdown sub-drop">
<li><a href="">Link </a></li>
<li><a href="">Link</a></li>
<li><a href="" target="_blank">Link</a></li>
</ul>
</li>
<li class="has-sub">
<a href="">Last One <span class="show-carrot">▾</span> </a>
<span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
<ul class="dropdown sub-drop">
<li><a href="">LinkLinkLinkLinkLink</a></li>
<li><a href="">Link</a></li>
</ul>
</li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</li>
<li><a href="">Link Link Link Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</li>
<li class="nav-root-item"><a href="">Link</a></li>
<li class="nav-root-item"><a href="">Link</a></li>
<li class="has-sub nav-root-item">
<a href="">Link <span class="show-carrot">▾</span> </a>
<span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
<ul class="dropdown sub-drop">
<li><a href="">Sub link 1</a></li>
<li><a href="">Sub link 2</a></li>
<li><a href="">Sub link 3</a></li>
<li class="has-sub">
<a href="">dropdown <span class="show-carrot">▾</span> </a>
<span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
<ul class="dropdown sub-drop">
<li><a href="">Sub link 1</a></li>
<li><a href="">Sub link 2</a></li>
<li><a href="">Sub link 3</a></li>
<li><a href="">Sub link 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</header>
CSS：
.container-nav {
background-color: #00bcd4;
margin-top: -1px; /* compensate for when alert isn't there */
padding-bottom: 10px;
}
.nav .navControl {
display: none;
cursor: pointer;
font-size: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 10px 0;
}
.open-icon {
float: right;
padding: 15px 20px;
}
.nav ul {
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.nav li {
/* margin-left: -4px; */
display: block;
position: relative;
z-index: 1;
font-size: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.nav a {
padding: 15px 20px;
display: inline-block;
color: #fff;
text-decoration: none;
text-align: left;
}
.nav a:hover {
color: #fff;
}
.nav-root li a {
text-decoration: underline;
}
.nav .dropdown {
text-align: left;
width: 100%;
}
.nav .dropdown li {
margin: 0;
display: block;
}
.nav .dropdown a {
padding: 15px 20px;
border-right: 0;
margin-right: 10px;
text-shadow: 0px 1px 1px #b9afaf;
}
.nav .dropdown li:last-child a {
margin-right: 0;
}
.has-sub .open-icon {
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.sub-drop {
display: none;
background-color: #0097A7;
}
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
.site-title {
width: 100%;
}
.site-title h1{
font-size: 33px;
}
.search {
width: 100%
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
@media all and (max-width: 600px) {
.site-title {
width: 100%;
text-align: center;
}
.search {
width: 100%
}
.nav .navControl {
display: block;
}
.nav-root {
display: none;
}
.show-carrot {
display: none;
}
}
@media all and (min-width: 600px) {
.site-title {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.search {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.search-field {
width: 50%;
}
.logo {
width: 50px;
}
.home-container {
margin-top: -34px;
}
.container-no-pad {
width: 100%;
margin: 0 auto;
}
.container-nav {
height: 189px;
}
.nav {
position: relative;
z-index: 5;
max-width: 1170px;
margin: 0 auto;
}
.nav-root {
padding-left: 0;
display: block;
}
.nav-root li a {
text-decoration: none;
text-align: left;
}
.nav ul {
border: 0;
white-space: nowrap;
}
.nav li {
/* margin-right: -4px; */
display: inline-block;
border: 0;
}
.nav a {
width: 100%;
}
.nav a:hover {
}
.nav .dropdown {
display: none;
background: #80DEEA;
position: absolute;
top: 100%;
left: 0;
width: auto;
}
.nav .dropdown li {
display: block;
}
.nav .dropdown a {
margin-right: 0;
white-space: nowrap;
}
.nav .dropdown a:hover {
background: #00bcd4;
}
.nav span {
display: inline;
position: relative;
left: 5px;
}
.nav a:hover + .dropdown,
.nav .dropdown:hover {
display: block;
}
/* desktop hover sub dropdown show */
.nav a:hover + span + .dropdown {
display: block;
}
.dropdown .dropdown {
left: 100%;
top: 0;
}
.sub-drop {
display: block;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.open-icon {
display: none !important;
}
.show-carrot {
display: block;
}
}
/*----------------------------------------------------------------------------------------------------------------*\
NAV dropdown z-index
\*----------------------------------------------------------------------------------------------------------------*/
.dropdown {
z-index: 1000;
}
.dropdown .dropdown {
z-index: 2000;
}
.dropdown .dropdown .dropdown {
z-index: 3000;
}
.dropdown li {
z-index: 1001;
}
.dropdown .dropdown li {
z-index: 2002;
}
.dropdown .dropdown .dropdown li {
z-index: 3003;
}
jQuery的：
$(document).ready(function() {
$('.dropdown').parent().hover(function() {
var menu = $(this).find("ul");
var menupos = $(menu).offset();
if (menupos.left + menu.width() > $(window).width()) {
var newpos = -$(menu).width();
menu.css({ left: newpos });
}
});
});
问题图片：
2 个答案:
答案 0 :(得分：0)
我觉得你有很多不必要的CSS样式，但主要是你在最后一个ul（我用类newStyle更新）上缺少一个z-index。
https://jsfiddle.net/ctxp4f3u/4/
.newStyle {
position: absolute;
z-index: 3000;
}
答案 1 :(得分：0)
所以我能够在你的造型中发现一些变化，但jsfiddle有其他修改
.container-nav {
background-color: #00bcd4;
margin-top: -1px; /* compensate for when alert isn't there */
padding-bottom: 10px;
}
.nav .navControl {
display: none;
cursor: pointer;
font-size: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 10px 0;
}
.open-icon {
float: right;
padding: 15px 20px;
}
.nav ul {
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.nav li {
/* margin-left: -4px; */
display: block;
position: relative;
font-size: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.nav a {
padding: 15px 20px;
display: inline-block;
color: #fff;
text-decoration: none;
text-align: left;
}
.nav a:hover {
color: #fff;
}
.nav-root li a {
text-decoration: underline;
}
.nav .dropdown {
text-align: left;
width: 100%;
}
.nav .dropdown .dropdown .dropdown li {
margin: 0;
z-index:8888
display: block;
background-color:#00bcd3
}
.nav .dropdown a {
padding: 15px 20px;
border-right: 0;
margin-right: 10px;
width:80%;
text-shadow: 0px 1px 1px #b9afaf;
}
.nav .dropdown li:last-child a {
margin-right: 0;
}
.has-sub .open-icon {
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.sub-drop {
display: none;
background-color: #0097A7;
}
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
.site-title {
width: 100%;
}
.site-title h1{
font-size: 33px;
}
.search {
width: 100%
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
@media all and (max-width: 600px) {
.site-title {
width: 100%;
text-align: center;
}
.search {
width: 100%
}
.nav .navControl {
display: block;
}
.nav-root {
display: none;
}
.show-carrot {
display: none;
}
}
@media all and (min-width: 600px) {
.site-title {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.search {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.search-field {
width: 50%;
}
.logo {
width: 50px;
}
.home-container {
margin-top: -34px;
}
.container-no-pad {
width: 100%;
margin: 0 auto;
}
.container-nav {
height: 189px;
}
.nav {
position: relative;
z-index: 5;
max-width: 1170px;
margin: 0 auto;
}
.nav-root {
padding-left: 0;
display: block;
}
.nav-root li a {
text-decoration: none;
text-align: left;
}
.nav ul {
border: 0;
white-space: nowrap;
}
.nav li {
/* margin-right: -4px; */
display: inline-block;
border: 0;
}
.nav a {
width: 100%;
}
.nav a:hover {
}
.nav .dropdown {
display: none;
background: #80DEEA;
position: absolute;
top: 100%;
left: 0;
width: auto;
}
.nav .dropdown li {
display: block;
width:200px;
}
.nav .dropdown a {
margin-right: 0;
white-space: nowrap;
}
.nav .dropdown a:hover {
background: #00bcd4;
}
.nav span {
display: inline;
position: relative;
left: 5px;
}
.nav a:hover + .dropdown,
.nav .dropdown:hover {
display: block;
}
.nav .dropdown .dropdown:hover
{
display:block
}
/* desktop hover sub dropdown show */
.nav a:hover + span + .dropdown {
display: block;
}
.dropdown .dropdown {
left: 100%;
top: 0;
}
.sub-drop {
display: block;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.open-icon {
display: none !important;
}
.show-carrot {
display: block;
}
}
/*----------------------------------------------------------------------------------------------------------------*\
NAV dropdown z-index
\*----------------------------------------------------------------------------------------------------------------*/
.dropdown {
z-index: 1000;
}
.dropdown .dropdown {
z-index: 2000;
}
/*
.dropdown .dropdown .dropdown {
z-index: 9999;
}
.dropdown li {
z-index: 1001;
}
.dropdown .dropdown li {
z-index: 2002;
}
.dropdown .dropdown .dropdown li a {
z-index: 9999;
}
.dropdown .dropdown .dropdown li {
z-index: 9998;
display:block
}*/
请查看下面的jsfiddle示例链接，希望它有所帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？