Javascript 引导菜单重叠下拉列表的问题
我的两个导航菜单有问题。我正在使用两个与引导程序相同类型的导航。第一个导航使用“navbar Reverse”类,第二个导航菜单使用“navbar default”类,只需稍作修改。当你点击右角的下拉菜单时,问题就会出现;第二个导航菜单将与下拉框重叠,只有菜单下方的内容可见 请查看下面的附件以获取说明 这是我当前的HTML设置:Javascript 引导菜单重叠下拉列表的问题,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我的两个导航菜单有问题。我正在使用两个与引导程序相同类型的导航。第一个导航使用“navbar Reverse”类,第二个导航菜单使用“navbar default”类,只需稍作修改。当你点击右角的下拉菜单时,问题就会出现;第二个导航菜单将与下拉框重叠,只有菜单下方的内容可见 请查看下面的附件以获取说明 这是我当前的HTML设置: <nav class="navbar navbar-inverse navbar-static-top"> <div class="contain
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Hjem</a></li>
...
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Innstillinger <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div id="navbar">
<ul class="nav navbar-nav">
...
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
切换导航
...
-
...
...
这是我的最新一期插图:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Hjem</a></li>
...
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Innstillinger <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div id="navbar">
<ul class="nav navbar-nav">
...
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
我创建了一个JSFIDLE,其中包含相应的样式表和框架。不幸的是,在这一点上,我还没有能够找到一个自己的解决方案。提前感谢您的帮助。您可以更改导航栏默认设置或下拉菜单的
z-index
。比如:
.navbar-default {
background: #b6d24b;
border-radius: 0px;
z-index: 1;
}
或:
更改此
从您的第二个导航栏转到
,我更新了您的
您只需在CSS中添加以下内容:
.navbar-inverse.navbar-static-top {
z-index: 800;
}
.navbar-default.navbar-static-top {
z-index: 700;
}
问题是您将z-index:1000应用于两个导航栏。根据这条规则:
.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
}
您应该更改此规则和/或添加我在上面提供的规则,以便为第一个导航栏提供更高的z索引值。只需为第二个导航栏添加此规则即可
.第二导航条{
顶部:50px;
z指数:999;
}
很高兴帮助您:)