title: Why CSS hover state removed?
body: <p>I have created a simple navigation and sub navigation(activated after hover on parent element), But In my project when I hover on subnavigation's last child the active class removed. Unable to figured out the problem. Please help. </p>
  
  <p>Here is the code and JSFIDDLE</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="menu-nav"&gt;
  
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="" class="current_user"&gt; &lt;span class="user_image"&gt;&lt;/span&gt;Hi, Inderjeet&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span class="bookings"&gt;Bookings&lt;b class="caret"&gt;&lt;/b&gt;
              &lt;ul class="dropdown_menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Booking 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Booking 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Booking 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span class="hosting"&gt;Hosting&lt;b class="caret"&gt;&lt;/b&gt;
              &lt;ul class="dropdown_menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Booking 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Booking 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Booking 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/span&gt;&lt;/li&gt;
  
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.menu-nav{float:left; }
  .menu-nav &gt; ul &gt; li{ display: inline-block; vertical-align: middle; -webkit-vertical-align: middle; -moz-vertical-align: middle; margin-left: 10px; margin-top: 25px;   } 
  .menu-nav &gt; ul &gt; li &gt; a, .menu-nav &gt; ul &gt; li &gt; span{color:#4d4d4d; font-size: 16px; padding:5px; position: relative;}
  
  ul.dropdown_menu{display: none; position: absolute; top: 0px; left: 0; padding-top:40px; padding-bottom: 20px; width: 200px;}
  ul.dropdown_menu &gt; li &gt; a {color:#4d4d4d; padding:10px; display: block; background:#fff;}
  ul.dropdown_menu.activemenu{display: block;}
  ul.dropdown_menu.activemenu li a:hover{background:red;}
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('.menu-nav ul li span').hover(function(){
          $(this).find('ul.dropdown_menu').toggleClass('activemenu');
      });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/bzLfu3er/" rel="nofollow">JSFIDDLE</a></p>