Question

Before reading the description please take a look at the drop down menu which I created in JSfiddle

http://jsfiddle.net/akhilpaul/bKxXZ/

I have a JQuery drop down menu which I taken from a tutorial 🙂 and it works great like animate the dropdown function smoothly. The problem is the animation(drop down) when I mouseover the down arrow(now red color) on the right side of the menu but this is not I’m looking actually I need to animate the drop down when I mouseover the menu(Our Services and Locations). And I made slight updates on the JQuery but that dosen’t work.. What I extra added to the Jquery is

added a class(.drop) to the particular li that having drop downs and commented the span function like this

 //$("ul.subnav").parent().append("<span></span>"); 

    $("ul.topnav li.drop").mouseover(function() {


<li class="drop">
        <a href="#">Our Services</a>
        <ul class="subnav">
            <li><a href="#">Contract</a></li>
            <li><a href="#">Sketch</a></li>
            <li><a href="#">Implementation</a></li>
        </ul>
</li>

Although I try to keep the hover effect of the drop down menu as visible when we move the cursor to drop down menu..

but both functions aren’t working!

Looking forward to your replies on this question

Thanks

Paul

Answer 1

You’re code can be condensed to just this:

$(function() {
    $("ul.topnav li:has(.subnav)").hover(function() {
        $("ul.subnav", this).slideDown('fast').show();
    }, function() {
        $("ul.subnav", this).slideUp('slow');
    });
});

http://jsfiddle.net/bKxXZ/13/

Here’s what changed:

1. Change your .mouseover() selector from selecting the span to selecting any li that has a subnav.
2. Change your selectors from $(this).parent() to just $(this) since our selector now points at what was the parent.
3. Remove the trigger span code, you don’t need it now.
4. Remove the trigger span .hover() code.
5. Change .mouseover() to .hover() and combine it with the existing .hover(), since they both apply to the same element.