Hover intent javascript not working on div structure menus

Question

I am trying to add hover intent.js in for menus for smooth hovering effect, but is is not working. Although it work well if i add it on ul, but not work if i add ul inside div.

Please find the code below which i am trying to implement. I am using hover intent library with bootstrap

 <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/2013.03.11/hoverintent.min.js"></script>
<script>     
   jQuery(document).ready(function () {
     "use strict";           
     var $ = jQuery.noConflict();

     function showMenu() {
       $(this).removeClass("drop-collapsed");
       $(this).addClass("open");
     }
     function hideMenu(){
       $(this).removeClass("open");
       var $dropdown = $(".dropdown");              

       $dropdown.each(function () {
         $(this).addClass("drop-collapsed");
       }
      );
     }          

     var $dropdown = $(".dropdown");                        
     $dropdown.each(function () {
       var $this = $(this);
       var $dropmenu = $this.find(".dropdown-menu");
       $dropmenu.css("height", $dropmenu.outerHeight());

       $this.addClass("drop-collapsed");
     }
    );     

     // dropdown menu hover intent
     var hovsettings = {
       timeout:0,
       interval: 0,
       over: showMenu,
       out: hideMenu
     }

     $(".dropdown").hoverIntent(hovsettings);
   }
   );   
</script>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
   <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Dropdown 
      <b class="caret">
      </b>
      </a>
      <ul class="dropdown-menu">
         <li>
            <a href="#">
            Action
            </a>
         </li>
         <li>
            <a href="#">
            Another action
            </a>
         </li>
      </ul>
   </li>
</ul>

Answer 1

Look at this Link.

 jQuery(document).ready(function () {
      "use strict";           
      var $ = jQuery.noConflict();

      function showMenu() {
        $(this).removeClass("drop-collapsed");
        $(this).addClass("open");
      }
      function hideMenu(){
        $(this).removeClass("open");
        var $dropdown = $(".dropdown");
        //var $dropdown= $(".li.has-childern")

        $dropdown.each(function () {
          $(this).addClass("drop-collapsed");
        }
       );
      }          

      var $dropdown = $(".dropdown");
      //var $dropdown= $(".li.has-childern");

      $dropdown.each(function () {
        var $this = $(this);
        var $dropmenu = $this.find(".dropdown-menu");
        $dropmenu.css("height", $dropmenu.outerHeight());

        $this.addClass("drop-collapsed");
      }
     );


      // dropdown menu hover intent
      var hovsettings = {
        timeout:0,
        interval: 0,
        over: showMenu,
        out: hideMenu
      }
      ;


      $(".dropdown").hoverIntent(hovsettings);
    }
    );

I set dropdown-menu class only for top div container. You need to fix styles to it looks good.