css - 为什么我右边的下拉显示的内容被挡住了，怎么办？-PHP中文网问答

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

  <p  class="mainmenu">
   <p  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>
     </p>
 
  <p 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>
</p>
</p> 
 </body>
</html>

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

<!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="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> <p class="mainmenu clearfix"> <p 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> </p> <p 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> </p> </p> </body> </html>