Bootstrap dropdown-menu unhover when in submenu

Question

I have a dropdown-menu working with javascript on hover.

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

and I set on hover style

i.dropdown:hover
{
  background-color: rgb(28,181,181);
}

here is the problem, when i am hovering the dropdown menu not the toggle, the toggle style will go back to normal. since it still register i am still hovering the toggle.

<li style="width:20%" class='dropdown'>
  <a href="" class="dropdown-toggle disabled"  id="dropdownMenu2"><div align='center'><b>example</b></div></a>
  <ul class='dropdown-menu' style='width: 100%;padding:0px;border-width:0px;' aria-labelledby="dropdownMenu2">
    <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example2</b></div></a></li>
    <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example3</b></div></a></li>
  </ul>
</li>

Answer 1

Please check this.

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

 li.dropdown:hover{ background-color: rgb(28,181,181); } .dropdown a{ display:block; line-height: 100%; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <li style="width:20%" class='dropdown'> <a href="" class="dropdown-toggle disabled" id="dropdownMenu2"><div align='center'><b>example</b></div></a> <ul class='dropdown-menu' style='width: 100%;padding:0px;border-width:0px;' aria-labelledby="dropdownMenu2"> <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example2</b></div></a></li> <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example3</b></div></a></li> </ul> </li> 

Answer 2

try with this snippet , is this what you need ?

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

 li.dropdown { transition-duration:0.7s; } li.dropdown:hover { background-color: rgb(28,181,181); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <li style="width:20%" class='dropdown'> <a href="" class="dropdown-toggle disabled" id="dropdownMenu2"><div align='center'><b>example</b></div></a> <ul class='dropdown-menu' style='width: 100%;padding:0px;border-width:0px;' aria-labelledby="dropdownMenu2"> <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example2</b></div></a></li> <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example3</b></div></a></li> </ul> </li>