CSSブートストラップドロップダウンメニュー

Question

私は自分のウェブサイトにブートストラップを使用しています。私はメニューのドロップダウンを作成したい。私は正常にドロップダウンメニューを作成しましたが、ドロップダウンメニューに項目を追加すると、重複してしまいます。

はここでこれらの両方がHTMLである私の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> 

なので、CSSはHTMLの外に他のCSSの影響を受けません。

currently working dropdown, but it over laps 私はCSSのセクションを欠いていると思います。= display：block;

私は数日間何もかも試していましたが、このコードは私が得た最も近いものです。ここに十分な情報がない場合は、私に知らせてください。私は1日以内に詳細と証拠を提供します。

お手数ですが、お手数ですがお手伝いできない場合でもありがとうございます。ほんとうにありがとう。あなたはCSSクラスに

を置き忘れてきたLukebone.com

Answer 1

でプロジェクト全体を表示することができ

ブートストラップ.dropdown-メニュー項目のすべての要素を含んでいる唯一の.dropdownメニュー、があるはずですメニューEx。 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>