Bootstrap 3.3.4 Pill Button Dropdowns unresponsive

Question

Prototyping a categorical classification system, I'm using Boostrap dropdown buttons in a pill-style navigation. I'm not committed to the pills, so if a different class such as a navbar might work instead, I'll change, though I did already try using navbar and button groups.

I don't know for sure that JavaScript inclusions might not be the problem, but I don't have dropdown.js in my distribution of Bootstrap. Compiling a custom version with only the components I need is way beyond my skill and the scope of the project.

CSS and JavaScript inclusions in head tag:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="jquery.2.1.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>

Code for dropdown list:

<div id="taglist">
    <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="dropdown">
          <a id="number-list" href="#" role="button" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true">
                Number<span class="caret"></span>
          </a>
          <ul id="number-list-menu" class="dropdown-menu" role="menu" aria-labelledby="number-list">
              <li><a tabindex="-1" role="menuitem" href="#">One</a></li>
              <li><a tabindex="-1" role="menuitem" href="#">Two</a></li>
              <li><a tabindex="-1" role="menuitem" href="#">Three</a></li>
              <li><a tabindex="-1" role="menuitem" href="#">Four</a></li>
              <li><a tabindex="-1" role="menuitem" href="#">Five</a></li>
          </ul>
        </li>
        <li class="dropdown" role="presentation">
            <a id="actors-list" href="#" role="button" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="dropdown-toggle">Actors<span class="caret"></span></a>
            <ul class="dropdown-menmu" id="actors-list-menu" role="menu" aria-labelledby="actors-list">
                <li><a tabindex="-1" role="menuitem" href="#">goats</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">children</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">dogs</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">cats</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">cows</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">donkeys</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">horses</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">birds</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">ducks</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">adult humans</a></li>
            </ul>
        </li>
    </ul>
</div>

That code follows the example from the getbootstrap.com JavaScript page as closely as possible, except with my own id names.

Answer 1

PaulL, You have a typo in this line...

<ul class="dropdown-menmu" id="actors-list-menu" role="menu"

Just change the dropdown-menmu to dropdown-menu.