I am looking to implement a timer for the submenu within my menu. The idea is to show the submenu for 3 seconds after a mouse-over event. I have already set up a function to display and hide the submenu, but I am facing an issue where the submenu shifts to another part of the menu after the second mouse-over event.
Here is the script I am using:
$(document).ready(function(){
$(".menu_ul > li").hover(function(){
$(this).find("ul").css("display","block");
},function(){
$(this).find("ul").css("display","none");
});
});
This is the HTML structure of my menu:
<ul class="menu_ul">
<li><a href="#" class="menu_active">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<div>
<li><a href="#">Mission Statement</a></li>
<li><a href="#">Our Team</a></li>
</div>
<div class="menu_border">
<li><a href="#">Facilities</a></li>
<li><a href="#">Downloads</a></li>
</div>
</ul>
</li>
<li><a href="#">Current Academic Year</a></li>
</ul>
For a working example, you can check it out here.