Help with Boostrap hover menu drop down

1

Hi, unsure if there’s a bug or glitch at Codepen but I just couldn’t get the toggling drop down menu to work

I have added bootstrap 3 to the CSS section, I have copied and pasted codes from other websites where the drop down work but for some reason doesn’t work in Code Pen. Thank you for your help

Here is the code:

<div class="container">
<div class="dropdown">
 <div class="btn-group"> 
   <!---- some reason this dropdown won't open unless "open" is included in the div class above---->
 
    <button class="fa btn btn-primary dropdown-toggle glyphicon glyphicon-user" type="button" data-toggle="dropdown"> User
    <span class="fa caret"></span></button>
    <ul class="dropdown-menu">
      <li class="fa fa-pencil"><a href="#">Edit</a></li>
      <li class="fa fa-trash"><a href="#">Delete</a></li>
      <li class="fa fa-ban"><a href="#">Ban</a></li>
      <li class="divider"></li>
      <li><a href="#">Make Admin</a></li>
    </ul>
      
    </div>
  
</div>
</div>

Here is the link to the page: https://codepen.io/xguardx/pen/LzjGRE

2

Bootstrap.js depends on jQuery. Quick-add jQuery, then make sure it’s on top of Bootstrap.js in the list.

1 Like