Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Rastko Jovic
Rastko Jovic
14,883 Points

BOOTSTRAP: Dropdown menu not working.

<div class="btn-group dropup">
                      <button type="button" class="btn btn-secondary">Action</button>
                      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="sr-only">Toggle Dropdown</span>
                      </button>
                      <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                      </div>
                    </div>

Button displays, but dropdown menu not showing.

1 Answer

Sia Hua Jiuh
Sia Hua Jiuh
11,138 Points
Sia Hua Jiuh
Sia Hua Jiuh
11,138 Points

Dear Rastko,

First, I presume that you have included jquery and js in your html.

The main problem is that you didn't assign "id" to your button which will be used to link to drop down menu using attribute "aria-labelledby". The working code of yours will be like following: 

<div class="btn-group dropup">

      <!-- <button type="button" class="btn btn-secondary">Action</button> -->
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action
        <span class="sr-only">Toggle Dropdown</span>
      </button>

      <div class="dropdown-menu" aria-labelledby="dropdownMenu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>

</div>

I commented out the first button as I think I might be redundant.

One thing I would like to point up that <a> is in-line element. So you might get more than one <a> in the same line (in your case "Action" and "Another action" will display in the same line) . I recommend that you use <ul> and <li> to wrap <a> in the drop down menu list.

Rgds Sia