下拉菜单项隐藏在引导程序自定义导航栏中的主菜单后面 [英] Dropdown menu items hides behind main menu in bootstrap customized navigation bar
本文介绍了下拉菜单项隐藏在引导程序自定义导航栏中的主菜单后面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在bootstrap中创建导航栏。在bootstrap-theme.min.css文件中添加了自定义样式。这样我就可以创建导航栏，但是下拉菜单项会隐藏在小屏幕设备的主菜单后面。输出的代码和截图如下：
I am trying to create Navigation bar in bootstrap. Have added customized styles in bootstrap-theme.min.css file. This way I am able to created navigation bar but dropdown menu items get hide behind main menu in small screen devices. The code and screenshots of output are as below:
bootstrap-theme.min.css文件中添加的样式：
Styles added in bootstrap-theme.min.css file:
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 14px;
background-image:url('https://s3.amazonaws.com/static.bizmerlin.net/bg_header.png');
background-repeat:repeat-x;
background-size:100% 100%;
border-width: 1px;
border-radius: 4px;
height: 40px;
background-color: rgba(70, 131, 176, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li, .navbar-brand {
color: rgba(255, 255, 255, 1);
background-color: #528cb4;
height: 38px;
border: 1px solid #ffffff;
margin-top:4px;
border-radius: 5px;
margin-right: 6px;
font-size: 14px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a, .navbar-brand {
color: rgba(255, 255, 255, 1);
line-height: 10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li:focus {
background-color: #7fbb00;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(233, 129, 42, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #4683b0;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #528cb4;
margin-top:10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #aeff00;
background-image: none;
background-color: #528cb4;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > .open > a {
background-image: none;
background-color: #7fbb00;
height: 36px;
border-radius: 4px;
}
.caret {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;
display: inline-block;
height: 0;
margin-left: 2px;
vertical-align: middle;
width: 0;
}
导航栏的HTML代码是：
HTML code for navigation bar is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3 Responsive Layout Example</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<nav id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container">
<div class="navbar-header"><a class="navbar-brand" href="#">Home</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder" >
<ul class="nav navbar-nav navbar-left">
<li style="background-color:#e9812a;"><a href="/">Home1</a>
</li>
<li><a href="/products">Products</a>
</li>
<li><a href="/about-us">About Us</a>
</li>
<li><a href="/contact">Contact Us</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu" >
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a>
<ul class="dropdown-menu sub-menu">
<li><a href="">asf</a></li>
</ul>
</li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="/contact">Contact Us</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Analytics</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
</div>
</body>
</html>
输出为：
下拉菜单隐藏在Contactus和Anlytics背后。请帮我解决这个问题。提前致谢。如果我的问题不清楚，请告诉我。
The dropdown menu hides behind Contactus and Anlytics. Please help me in solving this issue. Thanks in advance. Let me know if my question is not clear.
这里的JSFiddle http://jsfiddle.net/38fmg5h3/2/
JSFiddle here http://jsfiddle.net/38fmg5h3/2/
推荐答案
更新：我已将此添加到您的css
UPDATE : I added this to your css
#custom-bootstrap-menu.navbar-default .navbar-brand{
height:38px;
}
并删除身高：38px; 来自＃custom-bootstrap-menu.navbar-default .navbar-nav> li，.navbar-brand 。这应该可以解决问题。
and removed height:38px; from #custom-bootstrap-menu.navbar-default .navbar-nav>li, .navbar-brand. That should do the trick.
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 14px;
background-image:url('https://s3.amazonaws.com/static.bizmerlin.net/bg_header.png');
background-repeat:repeat-x;
background-size:100% 100%;
border-width: 1px;
border-radius: 4px;
height: 40px;
background-color: rgba(70, 131, 176, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-brand{
height:38px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li, .navbar-brand {
color: rgba(255, 255, 255, 1);
background-color: #528cb4;
border: 1px solid #ffffff;
margin-top:4px;
border-radius: 5px;
margin-right: 6px;
font-size: 14px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a, .navbar-brand {
color: rgba(255, 255, 255, 1);
line-height: 10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li:focus {
background-color: #7fbb00;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(255, 255, 255, 1);
background-color: rgba(233, 129, 42, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #e9812a;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #4683b0;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #528cb4;
margin-top:10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #aeff00;
background-image: none;
background-color: #528cb4;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > .open > a {
background-image: none;
background-color: #7fbb00;
height: 36px;
border-radius: 4px;
}
.caret {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;
display: inline-block;
height: 0;
margin-left: 2px;
vertical-align: middle;
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container">
<div class="navbar-header"><a class="navbar-brand" href="#">Home</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder" >
<ul class="nav navbar-nav navbar-left">
<li style="background-color:#e9812a;"><a href="/">Home1</a>
</li>
<li><a href="/products">Products</a>
</li>
<li><a href="/about-us">About Us</a>
</li>
<li><a href="/contact">Contact Us</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu" >
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a>
<ul class="dropdown-menu sub-menu">
<li><a href="">asf</a></li>
</ul>
</li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="/contact">Contact Us</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Analytics</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
</div>
在这里工作JSFiddle http://jsfiddle.net/38fmg5h3/1/
Working JSFiddle Here http://jsfiddle.net/38fmg5h3/1/
这篇关于下拉菜单项隐藏在引导程序自定义导航栏中的主菜单后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
