bootstrap 自定义导航栏中的下拉菜单项隐藏在主菜单后面

Question

我正在尝试在 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>

输出为：

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

JSFiddle 在这里 http://jsfiddle.net/38fmg5h3/2/

Answer 1

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

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

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

#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/

bootstrap 自定义导航栏中的下拉菜单项隐藏在主菜单后面

Dropdown menu items hides behind main menu in bootstrap customized navigation bar

html

css

navigationbar

twitter-bootstrap