<ul id="menu">
<li>What's on the menu?
<ul class="active">
<li><a href="#">Daily specials</a></li>
<li><a href="#">Photos from last night!</a></li>
<li><a href="#">Customer feedback</a></li>
</ul>
</li>
<li>Exclusive for members
<ul>
<li><a href="#">Celebrity features</a></li>
<li><a href="#">24/7 Monitoring</a></li>
</ul>
</li>
<li>Learn more about Us
<ul>
<li><a href="#">Our Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Get in touch with Us</a></li>
</ul>
</li>
</ul>
Jquery code:
<script>
$(document).ready(function(){
$('#menu>li>ul>li').hide();
$('#menu>li').click(function(e){e.stopPropagation();});
$('#menu>li').hover(
function(){
t=$(this);
$(t).find('ul>li').slideToggle();
},
function(){
$(t).find('ul>li').slideToggle();
}
);
});
</script>
I am creating a vertical navigation menu with submenus that expand when hovered over and collapse when the mouse moves away. Although the code provided works well, I am experiencing an issue where all items in the list expand and collapse as I move the cursor up and down the menu. How can I modify the code to only expand submenu items when the cursor is resting on them for a set duration (e.g., 500 milliseconds)?