为什么我右边的下拉显示的内容被挡住了，怎么办？

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <!-- <link  href="css/ejoy.css"  rel="stylesheet"  />  -->
  <link  href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script  src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <style>
      .mainmenu{
        border:1px solid yellow;
        width:auto;
        overflow:hidden;
        height：40px;      
      }  
      .nav  li{
        display:inline-block;
      }
  </style>
 </head>
 <body>

  <div  class="mainmenu">
   <div  class="container  pull-left">
    <ul class="nav ">     
        <li><a   href="#">标题1</a></li>
        <li><a href="#">标题2</a></li>
        <li><a  href="#">标题3</a></li>
        <li><a  href="#">标题4</a></li>
    </ul>
     </div>
 
  <div class="dropdown  pull-right">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel"  style="">
     <li tabindex="-1">aa</li>
     <li tabindex="-1">bb</li>
     <li tabindex="-1">cc</li>
     <li tabindex="-1">dd</li>
  </ul>
</div>
</div> 
 </body>
</html>

为什么我下拉框内容不能看到，怎样让它完整的显示出来？导航栏高度不能修改

去掉.mainmenu的overflow:hidden;

你设置一下这两个属性看看是不是你需要的

用position定位

overflow:hidden;超出隐藏了

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <!-- <link  href="css/ejoy.css"  rel="stylesheet"  />  -->
  <link  href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script  src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <style>
      .mainmenu{
        border:1px solid yellow;
        width:auto;
       /*  overflow:hidden; */
        height：40px;      
      }  
      .nav  li{
        display:inline-block;
      }
      .clear{
        clear:both;
        width:100%;
        height:0;
      }
     .clearfix:after{
        visibility:hidden;
        display:block;
        height:0;
        font-size:0;
        content:"";
        clear:both;
     }
  </style>
 </head>
<body>
  <div  class="mainmenu clearfix">
    <div  class="container  pull-left">
      <ul class="nav ">     
        <li><a   href="#">标题1</a></li>
        <li><a href="#">标题2</a></li>
        <li><a  href="#">标题3</a></li>
        <li><a  href="#">标题4</a></li>
      </ul>
    </div>
    <div class="dropdown  pull-right">
      <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown trigger
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dLabel"  style="">
        <li tabindex="-1">aa</li>
        <li tabindex="-1">bb</li>
        <li tabindex="-1">cc</li>
        <li tabindex="-1">dd</li>
      </ul>
    </div>
</div> 
</body>
</html>

去掉overflow：hidden;加个清除浮动就好了

【热门文章】