Fade in and fade out elements with hover in jQuery

Question

I'm working with a menu. If the user moves the cursor over principal elements of the menu, it shows a sub-menu (it has a delay to hide), but if I move the cursor over another principal element, the previous element is still showing behind the new element (and is only hide passing the delay).

How can hide the previous element when I pass the cursor over another principal element?

Below is the menu:

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="main-menu" class="nav navbar-nav ref"> <li class="dropdown dropdown-large option"> <a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a> <ul class="dropdown-menu dropdown-menu-large row change-f"> <li class="col-sm-4 option-sm"> <ul> <li> </li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li> </li> </ul> </li> </ul> </li> <li class="dropdown dropdown-large option"> <a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a> <ul class="dropdown-menu dropdown-menu-large row change-f"> <li class="col-sm-4 option-sm"> <ul> <li> </li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li class="dropdown-header title"><a href="#">subelement</a></li> </ul> </li> </ul> </li> </ul> 

Answer 1

I changed your second menu id to #drop-two.

 $(document).ready(function(){ $('.dropdown-menu, .dropdown-menu2').hide(); $('#drop-to').mouseover(function() { $('.dropdown-menu').fadeIn(); }) $('#drop-to').mouseout(function() { $('.dropdown-menu').fadeOut(1000); }) $('#drop-two').mouseover(function() { $('.dropdown-menu2').fadeIn(); }) $('#drop-two').mouseout(function() { $('.dropdown-menu2').fadeOut(1000); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="main-menu" class="nav navbar-nav ref"> <li class="dropdown dropdown-large option"> <a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a> <ul class="dropdown-menu dropdown-menu-large row change-f"> <li class="col-sm-4 option-sm"> <ul> <li> </li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li> </li> </ul> </li> </ul> </li> <li class="dropdown dropdown-large option"> <a id="drop-two" href="#" class="dropdown-toggle firstTextOption">P element</a> <ul class="dropdown-menu2 dropdown-menu-large row change-f"> <li class="col-sm-4 option-sm"> <ul> <li> </li> <li class="dropdown-header title"><a href="#">subelement</a></li> <li class="dropdown-header title"><a href="#">subelement</a></li> </ul> </li> </ul> </li> </ul>