最初のドロップダウンが機能し、2番目のブートストラップはありません3

Question

ブートストラップでは、2つのドロップダウンが必要です。コード内の最初のものだけが機能します。私はコピーして

<div class="dropdown" style="position: absolute; left: 30%"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games 

     <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="comingsoon/index.html">Coming Soon!</h5></li> 
    </ul> 
</div> 
    <div class="dropdown" style="position: absolute; left: 60%"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games 

     <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="comingsoon/index.html">Coming Soon!</h5></li> 
    </ul> 
</div> 

（私はそれが何もしない第二いずれかをクリックした場合、それは、メニューを開いて最初のものをクリックした場合。これらの両方がまったく同じものであり、一緒に動作しません）

を貼り付けた場合でも

Answer 1

未解決のアンカータグがあるという問題があります。 2つの場所に</a>の代わりに</h5>があります。この問題を解決すると、正しく動作します。

<div class="dropdown" style="position: absolute; left: 30%"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games 

     <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="comingsoon/index.html">Coming Soon!</a></li> 
    </ul> 
</div> 

Bootply