My dropdown menu is not working as expected. I want to show the sub-menu when clicking on an item, and remove the previous sub-menu when clicking or blurring on another menu by removing the drop-down class. However, my current jQuery code does not seem to be functioning properly.
jQuery
$('.menu_item > li ').click(function(){
$('.menu_item .drop-down').removeClass();
$(this).find('span').addClass('drop-down');
});
$('.menu_item .drop-down').blur(function(){
$('.menu_item .drop-down').removeClass();
return false;
});
HTML
<nav id="menu_wrap" class="container">
<a href="index.php" class="logo"></a>
<a href="#" id="select_menu" class="active" onclick="open_menu()">Menu</a>
<ul class="menu_item">
<li><input type="text" placeholder="Search in here" class="search"></li>
<li><a href="#">Top Lists</a></li>
<li><a href="#">Shops</a></li>
<li><a href="#">Products</a>
<span>
<a href="#">Products</a>
<a href="#">Products</a>
<a href="#">Products</a>
<a href="#">Products</a>
</span>
</li>
<li><a href="Signup.php">Create Account</a></li>
<li><a href="Login.php">Log in</a></li>
</ul>
</nav>