Geek Answers Handbook

Dropdown menu not showing in Bootstrap

I am trying to get a basic dropdown in Bootstrap:

<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script> <div class="dropdown"> <!-- Link or button to toggle dropdown --> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </div> </body> </html>

However, nothing appears. I know that local CSS and JS files are transferred correctly. As far as I understand, JS includes all plugins by default.

EDIT: Thank you all for your feedback. I can add only if people find themselves in the same situation as me to move on in the lesson before copying and pasting fragments.

+8
twitter-bootstrap twitter-bootstrap-2
source share
5 answers

I think your code was mostly good, but you are missing a link to cause a crash. See Ths jsFiddle

Notice that i added

 <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

Here is an example of how to include it in a full navigation bar

Good luck

+12
source share

Pay attention to the comment "<- Link or the button for switching the drop-down list →" in your code. You need to put a link or button with the attribute data-toggle = "dropdown" to activate Dropdown.

Try the following:

  <div class="dropdown"> <!-- Link or button to toggle dropdown --> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-user"></i> TestDropdown <span class="caret"></span> </a> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-user"></i> TestDropdown <span class="caret"></span> </a> <a data-toggle="dropdown"> Dropdown Test </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </div>
+3
source share

From docs :

Looking at the dropdown menu, HTML is required here. You need to wrap the trigger of the drop-down menu and the drop-down menu inside .dropdown or another element that will declare the position: relative ;. Then just create a menu.

Therefore, you probably need to set CSS for your dropdown class in order to have (at least) position: relative; . In addition, by default you have display:none on .dropdown-menu . Try also overriding this.

+2
source share

Instead of a div, try parent ul and li wrap your ul, which you posted above. eg,

  <ul class="nav nav-pills span7 pull-right" id="upper_username_hide"> <li class= "dropdown" data-dropdown="dropdown"> <a id="" class="dropdown-toggle" data-toggle="dropdown" href="#"> <b class="caret dropdown-toggle"></b> </a> <ul class="dropdown-menu" > <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </li> </ul>

I don't think tab-index will be needed since bootstrap css will take care of that. Good luck

+1
source share

In my case, I found that the boottrap .dropdown-menu class set the property top: top: 100% , which led to the drop-down menu being shown outside the viewport. I did an override of the upper value with another class and now it works.

0
source share

More articles:


All Articles