title: Bootstrap Dropdown Menu Not Dropping Down On Hover
body: <p>I'm trying to follow <a href="http://nowordpress.gatewaywebdesign.com/index.html" rel="nofollow noreferrer">this example</a> for creating a dropdown menu in bootstrap on hover. Right now when you hover over the dropdown menu, nothing happens - <a href="http://nowordpress.gatewaywebdesign.com/index.html" rel="nofollow noreferrer">(try hovering over services)</a>.  </p>
  
  <p>What doesn't make sense to me is that it actually works in the <a href="https://jsfiddle.net/DTcHh/32978/" rel="nofollow noreferrer">JSFiddle</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
      &lt;div class="container"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                  data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;a class="navbar-brand" href="http://nowordpress.gatewaywebdesign.com/"&gt;
              &lt;img src="assets/images/gatewaylogo.png"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;&lt;a href="http://nowordpress.gatewaywebdesign.com/index.html"&gt;Home &lt;span
                      class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://nowordpress.gatewaywebdesign.com/about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                     aria-expanded="false"&gt;
                      Services
                      &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="http://nowordpress.gatewaywebdesign.com/website-design.html"&gt;Website Design&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://nowordpress.gatewaywebdesign.com/graphic-design.html"&gt;Graphic Design&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://nowordpress.gatewaywebdesign.com/promotional-products.html"&gt;Promotional Products&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://nowordpress.gatewaywebdesign.com/search-engine-marketing.html"&gt;Search Engine Marketing&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://nowordpress.gatewaywebdesign.com/wordpress-conversion.html"&gt;WordPress Conversion&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="/store.html"&gt;Store&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;My Account&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>#bottom-nav-menu {
  height: 100px;
  }
  
  #gatewaylogo {
  height: 85px;
  padding-left: 6px;
  padding-top: 10px;
  }
  
  .navbar-li, .navbar-li a {
  text-decoration: none;
  font-family: 'oswald_regularregular';
  color: #1B3764;
  list-style-type: none;
  font-size: 22px;
  }
  
  .navbar-li a:hover {
  color: #76abdc;
  text-decoration: none;
  }
  
  #my-account {
  position: relative;
  }
  
  .navbar-brand {
  height: inherit;
  }
  
  .navbar-brand img {
  height: 82px;
  padding: 10px 0;
  }
  
  .navbar-default {
  border: none;
  background: #ffffff;
  line-height: 100px;
  margin-bottom: 0;
  }
  
  .navbar-default .navbar-nav &gt; .active &gt; a,
  .navbar-default .navbar-nav &gt; li &gt; a:hover,
  .navbar-default .navbar-nav &gt; li &gt; a:focus {
  background: none;
  background-color: transparent;
  color: #1971b9;
  transition: ease-in-out 0.3s;
  }
  
  .navbar-default .navbar-nav &gt; li &gt; a {
  font-family: 'oswald_regularregular';
  color: #1B3764;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 100px;
  }
  
  .navbar-default .navbar-nav &gt; li:last-child &gt; a {
  margin-right: 0;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>// dropdown-menu
      $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
          }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
      });
  </code></pre>
  
  <p>The JavaScript is loaded in the <code>&lt;head&gt;</code> section, inside of opening and closing <code>&lt;script&gt;</code> tags. And again the site is live <a href="http://nowordpress.gatewaywebdesign.com/index.html" rel="nofollow noreferrer">here</a>. Please let me know if you have any suggestions - thanks!</p>