Dropdown menu not showing in Bootstrap

50,644

Solution 1

I think your code was basically good, but you are missing a link to trigger the drop down. See ths jsFiddle

Note that I added

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

Here's an example of how to include it in a complete nav bar

Good luck!

Solution 2

Please pay extra attention to comment <-- Link or button to toggle dropdown --> in you code. You need to put a Link or button with data-toggle="dropdown" property to activate the Dropdown.

Try this :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->

  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
    <i class="icon-user"></i> TestDropdown
    <span class="caret"></span>
  </a>
  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
    <i class="icon-user"></i> TestDropdown
    <span class="caret"></span>
  </a>
  <a class="btn btn-default" 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>

Solution 3

Instead of div,try a parent ul and li to wrap your ul that you have posted above. for example,

    <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 dont think tab-index will be necessary as bootstrap css takes care of that. Good luck!

Solution 4

From the docs:

Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.

So you probably need to set the CSS for your dropdown class to have (at least) position: relative;. Also you have a display:none on .dropdown-menu by default. Try also overriding that.

Solution 5

In my case I discovered the .dropdown-menu bootstrap class had set the top property to:top: 100%, that caused that the dropdown was shown outside the viewport. I did override the top value with another class and now is working.

View more solutions

50,644

Author by

ezequiel-garzon

Updated on October 20, 2020

Comments

ezequiel-garzon over 3 years

I'm trying to get a basic dropdown menu 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 shows up. I know the local CSS and JS files are being referred correctly. As far as I understand, the default JS includes all the plugins.

EDIT: Thanks to all for your feedback. I can only add, in case people find themselves in the same situation I am, to move further down in the tutorial before copying and pasting the snippets.

ezequiel-garzon over 11 years

Thanks, but I believe the provided example does the required .dropdown wrapping, no?
Miha Rekar over 11 years

Well there is no .dropdown class in default bootstrap css, so you have to do that.
ezequiel-garzon over 11 years

Thanks again, but this doesn't fix it. In any case, my (unminified) bootstrap.css has, spread between lines 2840 and 2843, the declaration .dropup, .dropdown { position: relative; }. I added your suggestion manually, to no avail.
Miha Rekar over 11 years

You have a display:none on .dropdown-menu by default. Try overriding that.
ezequiel-garzon over 11 years

Thanks a lot... It's a frustrating enterprise trying to learn Bootstrap. I would expect official snippets to be self-contained but, alas, I guess they expect you to know what you're doing. Any advice on how to acquire the minimal HTML/CSS/JS knowledge in order to properly harness Bootstrap will be appreciated. Thanks again.
ezequiel-garzon over 11 years

Thanks! At the risk of throwing around many open-ended questions in comments... How do you go about building your understanding of Bootstrap usage? Any recommended resources besides the official documentation? (The tabindex settings were copied verbatim from the official snippet.)
ezequiel-garzon over 11 years

Thanks again, Miha. I think a few sections down there is a fuller example of how dropdowns are meant to be used. I know I've been a grumpy old man, but... this piecemeal approach is disconcerting when applied to a technical product. I guess one is supposed to read all the docs before trying the stuff. Further, my CSS knowledge is well behind yours, but precisely I was hoping a very rough understanding of CSS would allow me to use Bootstrap instead of tweaking the CSS itself! Oh, well... Thanks once more!
David Taiaroa over 11 years

I know what you mean about use of the snippets not always being as simple as you might expect. I've found myself inspecting a lot of HTML and CSS source code to fill in the blanks. I'm starting to appreciate the logic behind how the styling and scaffolding work though so it's all getting easier with time ;)
Rajarshi over 11 years

Creating and experimenting with the bootstrap classes is always the best way for this,but when you're at a loss,try inspecting code from some existing sites already using twitter bootstrap.
ezequiel-garzon over 11 years

Thanks for such a clear example. It taught me that several buttons/links can trigger the same dropdown, as well as some idiosyncrasies about Bootstrap docs!