下拉菜单项隐藏在引导程序自定义导航栏

时间：2015-04-23 10:18:15

标签： css html5 twitter-bootstrap navigationbar

我正在尝试在bootstrap中创建导航栏。在bootstrap-theme.min.css文件中添加了自定义样式。通过这种方式，我可以创建导航栏，但是下拉菜单项会隐藏在小屏幕设备的主菜单后面。输出的代码和截图如下：

在bootstrap-theme.min.css文件中添加样式：

#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代码是：

    <!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>

输出为：enter image description here

下拉菜单隐藏在Contactus和Anlytics背后。请帮我解决这个问题。提前致谢。如果我的问题不明确，请告诉我。

JSFiddle here http://jsfiddle.net/38fmg5h3/2/

1 个答案:

答案 0 :(得分：2)

更新：我已将此添加到您的css 

#custom-bootstrap-menu.navbar-default .navbar-brand{
    height:38px;
}

并从height:38px;移除了#custom-bootstrap-menu.navbar-default .navbar-nav>li, .navbar-brand。这应该可以解决问题。

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

在这里工作JSFiddle http://jsfiddle.net/38fmg5h3/1/

相关问题
最新问题