title: Modifying Dropdown-Toggle for Hover
body: <p>I am attempting to modify the <a href="http://bootstraptaste.com/theme/moderna/" rel="nofollow">Moderna</a>  site template. If you look at the links in the header and click on <code>Features</code> you will see a dropdown menu. </p>
  
  <p>What I am trying to do is change it so this menu appears on <code>hover</code> instead of on <code>click</code> but I cannot seem to get it working. </p>
  
  <p>These are what I am changing in the...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="navbar-collapse collapse "&gt;
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown active"&gt;
              &lt;a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false"&gt;Features &lt;b class=" icon-angle-down"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="typography.html"&gt;Typography&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="components.html"&gt;Components&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="pricingbox.html"&gt;Pricing box&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>header .nav li a:hover,
  header .nav li a:focus,
  header .nav li.active a,
  header .nav li.active a:hover,
  header .nav li a.dropdown-toggle:hover,
  header .nav li a.dropdown-toggle:focus,
  header .nav li.active ul.dropdown-menu li a:hover,
  header .nav li.active ul.dropdown-menu li.active a{
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
  }
  </code></pre>
  
  <p>I have tried changing the <code>class="dropdown-toggle"</code> to</p>
  
  <ul>
  <li><code>class="dropdown-toggle:hover"</code></li>
  <li><code>class="hover"</code></li>
  <li><code>class="dropdown-toggle hover"</code></li>
  </ul>
  
  <p>and I have tried changing <code>data-toggle="dropdown"</code> to </p>
  
  <ul>
  <li><code>data-toggle="dropdown hover"</code></li>
  <li><code>data-toggle="hover"</code></li>
  <li><code>data-toggle="dropdown-toggle:hover"</code></li>
  </ul>
  
  <p>but to no avail. I am doing something wrong however, I am not knowledgeable (clearly) enough to figure it out.</p>