0

Hello

I hope you can assist me with this :)

$(document).ready(function(){
$(".downservices").mouseenter(function() {
	$(this).parent().find(".servicesdropped").slideDown("fast").show();
	$(this).parent().hover(function() {
}, function(){
	$(this).parent().find(".servicesdropped").slideUp("fast");
}); }); });

This code allows me to make a drop down menu when the cursor hovers over a link.

I have a horizontal menu, so when I hover over a certain link, I get a drop down menu, but the problem is that it won't go away if my cursor is still around the horizontal menu. It will go away if my cursor is outside of the menu.

I have my menu styled in a

<ul>
<li>home</li>
<li class='downservices'>Dropdown link</li>
<div class='servicesdropped'>
<ul>
<li>links</li>
<li>links</li>
</ul>
</div>
</ul>

Thank you

Edited by andrewliu: n/a

2
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by bvelez352
0
<ul>
<li>home</li>
<li class='downservices'><a href="#">Dropdown link</a>
<ul>
<li>links</li>
<li>links</li>
</ul>
</li>
</ul>

jQuery

$(function(){
$('li.downservices').find('ul').hide();
$('li.downservices').hover(function(){
this.next('ul').slideDown();
}, function(){
this.next('ul').hide();
});
});

if you want a more detailed tutorial, I wrote a blog post here

Edited by bvelez352: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.