title: Bootstrap Dropdown on Hover Removing Styles
body: <p>Currently I'm trying to make it so that my bootstrap dropdown happens only on hover instead of on click.</p>
  
  <p>I have a 100% width dropdown all styled and ready with on click method, but when I change the CSS to make the dropdown appear on hover it seems to remove the styles or overwrite them?</p>
  
  <p>Any help would be brilliant.</p>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>    &lt;li class="dropdown"&gt;
        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;&lt;i class="ion-navicon icon"&gt;&lt;/i&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Another action&lt;/a&gt;
              &lt;a href="#"&gt;Another action&lt;/a&gt;
              &lt;a href="#"&gt;Another action&lt;/a&gt;
              &lt;a href="#"&gt;Another action&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p><strong>My CSS</strong></p>
  
  <pre><code>.nav &gt; li.dropdown.open { position: static; }
  .nav &gt; li.dropdown.open .dropdown-menu 
  {
      display:table; 
      width: 100%; 
      text-align: center; 
      left:0; 
      right:0; 
      margin-top:-1px; 
      box-shadow: none; 
      border:none;
      background:#252525;
  }
  
  .dropdown-menu&gt;li { display: table-cell; }
  </code></pre>
  
  <p>But when I add the below code it instantly changes back to the original styles?</p>
  
  <pre><code>.dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0; // remove the gap so it doesn't close
   }
  </code></pre>
  
  <p>If it makes any difference the backend is Wordpress.</p>
  
  <p>Thanks</p>