Third level hover delay on Boostrap menu

Question

I have a three level hover menu that is activated when hovering via CSS. I'd like to implement a slight delay fading in and out when the menu is displayed, however, I'm having difficulty figuring out how to do that on the last level of the menu.

The first level works properly with a slight delay, but no delay seems to happen when opening the third level from the parent.

Here's my Jquery code.

$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

$('ul.nav li#secondary').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
$(this).find('.dropdown-men').stop(true, true).delay(200).fadeOut();
});

Fiddle

I'm thinking it has something to do with my CSS, not the Jquery itself.

Answer 1

It has to do with both jquery and CSS.

On the hover of the first element u also want only to find the first dropdown, otherwise both are fade in parallel

$('ul.nav li.dropdown').hover(function() {
    var first = $(this).find('.dropdown-menu')[0];
    $(first).stop(true, true).delay(200).fadeIn();
}, function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

$('ul.nav li#secondary').hover(function() {
    console.log("reached sub here 1");
    $(this).find('.sub-menu').stop(true, true).delay(200).fadeIn();
    console.log($(this).find('.sub-menu'));
}, function() {
    $(this).find('.sub-menu').stop(true, true).delay(200).fadeOut();
});

In CSS submenu should set to display:none

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

.navbar-brand img {
  position: absolute;
  left: 50%;
  top: 0;
  text-align: center;
  margin: 0 auto;
}

.navbar-toggle {
  z-index: 3;
}

nav.navbar i.fa {
  padding-left: 5px;
  padding-right: 5px;
}

ul.nav li:hover > ul.dropdown-menu {
  //display: block;
}

#navbar {
  text-align: center;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  display:none;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu,
.dropdown-menu li:focus .sub-menu {

}

#navbar-collapse-new.navbar-collapse {
  padding-top: 0px;
  padding-right: 38px;
}

HTML:

<nav class="navbar navbar-default" role="navigation" aria-label="Main Menu">
   <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar-collapse-new">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar">
         </span><span class="icon-bar">
         </span><span class="icon-bar">
         </span>
         </button>
         <a class="navbar-brand" href="#">Brand</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbar-collapse-new">
         <ul class="nav navbar-nav navbar-left" role="menu">
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
               <ul class="dropdown-menu" id="secondaryMenu" role="menu" aria-expanded="false">
                  <li id="secondary" role="menuitem">
                     <a href="#">One more separated link</a>
                     <ul class="dropdown-menu sub-menu" role="menu">
                        <li id="tertiary" role="menuitem">
                           <a title="Organizer Home Page" class="tertiary-link" href="/geonext/myhome.geo">Organizer     Home</a>
                        </li>
                     </ul>
                  </li>
               </ul>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container-fluid -->
</nav>

https://jsfiddle.net/ka6me6p0/