CSS Bootstrap下拉菜单

Question

我为我的网站使用Bootstrap。我想创建一个菜单下拉菜单。我已经成功创建了一个下拉菜单，但是当我向下拉菜单添加更多项目时，它们只是重叠。

这里是我的HTML

     <li> 
         <li role="presentation" class="dropdown"> 
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" > 
           Education<span class="caret"></span> 
          </a> 
          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item"> 
           <a href="signout.php">Biology </a> 
          </ul> 
          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item"> 
           <a href="signout.php">World History </a> 
          </ul> 
          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item"> 
           <a href="signout.php">English </a> 
          </ul> 
          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item"> 
           <a href="signout.php">Spanish </a> 
          </ul> 
          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item"> 
           <a href="signout.php">Psychology </a> 
          </ul> 
         </li> 

和CSS

      <style> 
         .dropdown-menu { 
          position: absolute; 
          top: 100%; 
          left: 5px; 
          margin: 8px 22px 8px 22px; 
          z-index: 1000; 
          display: none; 
          float: left; 
          min-width: 160px; 
          /*padding: 5px 0;*/ 
          padding-left: 10px; 
          margin: 2px 0 0; 
          font-size: 14px; 
          text-align: right; 
          color:white; 
          list-style: none; 
          background-color: #fff; /* here */ 
          -webkit-background-clip: padding-box; 
          background-clip: padding-box; 
          border: 0px solid #ccc; 
          border: 0px solid rgba(0,0,0,.15); 
          border-radius: 0px; 
          -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); 
          box-shadow: 0 0px 0px rgba(0,0,0,.175); 
         } 
         .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { 
          background-color: transparent; 
         } 
         .dropdown-menu-item{ 
          color:white; 
          background-color:rgba(255, 255, 255, 0); 
         } 

         </style> 

这些都是在HTML，所以CSS不会被任何其他的CSS的HTML之外的影响。

currently working dropdown, but it over laps 我想我错过了一段CSS，例如= display：block;

我已经花了几天时间玩一切，而且这段代码是我得到的最接近的。如果这里没有足够的信息，请让我知道，我会在一天内提供更多细节和证据。

非常感谢你的时间，即使你不能帮助。对此，我真的非常感激。

您可以在Lukebone.com

查看整个项目

Answer 1

您遗失的CSS类

应该只有一个.dropdown菜单，包含所有.dropdown菜单项元素的引导菜单例如。 belowe

<ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Education <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Biology</a></li> 
      <li><a href="#">World History </a></li> 
      <li><a href="#">English</a></li>     
      <li><a href="#">Spanish</a></li> 
      <li><a href="#">Psychology</a></li>     
     </ul> 
    </li> 
</ul>