I have noticed that this issue has been raised before, but none of the solutions provided seem to fix my problem specifically.
The submenu in my menu is not functioning as intended. It should be displayed when hovered over and hidden when not being hovered on.
Currently, I can hover over the menu item, but it disappears when I try to select the next option.
I can't figure out where I'm making a mistake. This feature seems so simple, yet it's driving me crazy! Below is the code I am working with:
$(document).ready(function() {
$('.dropdown-submenu a.subhover').on("mouseover", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
$(document).ready(function() {
$('.dropdown-submenu a.subhover').on("mouseleave", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
display: hidden;
}
.dropdown-submenu:hover .dropdown-menu {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown menu-btn">
<a id=t estmanage class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-database fa-lg "></i> Manage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="btn_addnew" href="#">Create Audit</a></li>
<li><a href="store_departments_list.php">Departments</a></li>
<li><a href="store_product_management2.php">Products</a></li>
<li class="dropdown-submenu">
<a class="subhover" tabindex="-1" href="#"> Data Entry <span class="caret"></span></a>
<ul style="display: none;" class="dropdown-menu">
<li><a href="labour_costs.php"> Labour Costs </a></li>
<li><a href="purchases_list.php"> Purchases </a></li>
<li style="cursor: pointer;"><a data-toggle="modal" data-target="#salesModal">Sales</a></li>
<li><a href="waste_list.php"> Wastage </a></li>
</ul>
</li>
</ul>
</li>I apologize for the messy formatting of the HTML section. I cannot seem to replicate how it appears in my editor!