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

Recommended Answers

<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

Jump to Post

All 2 Replies

help me pleaseeee

<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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.