Grow your CSS skills. Land your dream job.

jsFiddle – Help with jQuery simple drop down.

  • # November 8, 2011 at 3:13 pm

    Can someone please take a look at this and help me where I am going wrong I am so rubbish with jQuery!

    http://jsfiddle.net/9XMS9/

    Many Thanks.

    # November 8, 2011 at 4:50 pm

    Try this

    Basically, I hide the sub_menu, then added a hover event on the dropdown which fades in the sub_menu on mouseover and fades the sub_menu out when the mouse leaves. If you need more of an explanation, just ask :)

    $("ul.sub_menu").fadeOut();
    $('ul.dropdown').hover(function(){
    $("ul.sub_menu").stop().fadeIn();
    },function(){
    $("ul.sub_menu").stop().fadeOut();
    });
    # November 10, 2011 at 4:52 pm

    I have tried your code but can’t see it working.

    Immediately on page load the menu appears then fades away but when I hover it doesn’t reappear.

    # November 10, 2011 at 5:30 pm

    I just pasted in @Mottie‘s script, it seems to be working.

    remember that javascript area on JSFiddle only accepts javascript, not the HTML script tags.

    # November 10, 2011 at 8:03 pm

    This is crazy works perfectly in the jsFiddle but not on my local server. Must be something conflicting.

    # November 11, 2011 at 1:51 am

    You should add this to your page:

    (remember jsfiddle does the script tag and the on dom load for you)

    # November 12, 2011 at 10:03 am

    Excellent works a treat mate.

    Is there a better way to write this so when the page loads I don’t see the menu fade out?

    # November 14, 2011 at 6:35 am

    Yeah there is:

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".