title: Bootstrap Dropdown effect - jQuery
body: <p>I have a Bootstrap menu but the Dropdown on <code>About Us</code> doesn't work great. Try the demo here: <a href="https://jsfiddle.net/wbbpdfm7/" rel="nofollow">https://jsfiddle.net/wbbpdfm7/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Latest compiled and minified CSS included as External Resource*/
  
  /* Optional theme */
  
  body {
    margin: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;nav class="navbar navbar-default navbar-fixed-top" style="background:#fff"&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="navbar-header title"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul id="menu-primary-menu" class="nav"&gt;
          &lt;li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-13"&gt;
            &lt;a href="http://localhost:8888/about-us/" class="dropdown-toggle" data-toggle="dropdown"&gt;About Us&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu depth_0"&gt;
              &lt;li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"&gt;
                &lt;a href="http://localhost:8888/about-us/the-team/"&gt;The Team&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"&gt;
                &lt;a href="http://localhost:8888/about-us/michael/"&gt;Michael&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"&gt;
            &lt;a href="http://localhost:8888/bespoke/"&gt;Bespoke&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-15" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-15"&gt;
            &lt;a href="http://localhost:8888/category/blog-news/"&gt;Blog&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item active menu-item-11"&gt;
            &lt;a href="http://localhost:8888/contact-us/"&gt;Contact Us&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>See how I click the menu icon, I want the <code>About Us</code> sub-menu to be open, however it's not open. </p>
  
  <p>What am I doing wrong?</p>