title: Twitter Bootstrap drop down menu not working
body: <p>I know there are a lot of questions like this on Stack Overflow and I've looked at them but my dropdown menu still isn't working.</p>
  
  <p>Here's my code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
                  &lt;div class="navbar-inner"&gt;
                          &lt;div class="container"&gt;
  &lt;ul class="nav pull-left"&gt;
  &lt;li&gt;&lt;a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static"&gt;Login&lt;/a&gt;&lt;/li&gt;
   &lt;li class="dropdown" id="accountmenu"&gt;
                          &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;My Account&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Register&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What's wrong with it?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>So the drop down menu is now working with the answer posted to this question. However if I include the scripts mentioned over there the modal window stops working. And when I comment those entries it starts working again. </p>
  
  <p>Here's the code for my modal window:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
      aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;
              X&lt;/button&gt;
          &lt;h3 id="myModalLabel"&gt;
              Enter your Credentials&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;form class="form-horizontal"&gt;
      &lt;div class="control-group"&gt;
      &lt;label class="control-label" for="inputEmail"&gt;Email&lt;/label&gt;
      &lt;div class="controls"&gt;
      &lt;input type="email" id="inputEmail" placeholder="Email"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="control-group"&gt;
      &lt;label class="control-label" for="inputPassword"&gt;Password&lt;/label&gt;
   &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="control-group"&gt;
      &lt;div class="controls"&gt;
      &lt;label class="checkbox"&gt;
      &lt;input type="checkbox"&gt; Remember me
      &lt;/label&gt;
      &lt;a href="news.php" class="btn btn-primary"&gt;Login&lt;/a&gt;
      &lt;a href="registration.php" class="btn btn-primary"&gt;Sign up&lt;/a&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the JavaScript for the trigger:</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#myModal').on('hide',function(){
      $('.nav &gt; li &gt; a.modal-open-li').removeClass('modal-open-li');
  });
  </code></pre>