Hey there! I'm currently facing an issue where the submenu dropdown is displaying when its grandparent is hovered, rather than just its parent. Here's the code snippet:
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle disabled" data-toggle="dropdown" href="https://www.drona.in/current-affairs/">GOVT JOBS</a>
<li class="dropdown-submenu">
<a class="test" data-toggle="dropdown" tabindex="-1" href="#">New
dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Below is the accompanying JavaScript:
$(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
},
function() {
$('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
});
The issue here is that the 2-level dropdown should only open when hovering over the "New dropdown" link, but it ends up opening when hovering over "Govt Jobs." Any suggestions on how to fix this?