Question

I am trying to get a jQuery menu working which hovers out every single item. Here is the fiddle code!. How you will probably see in the result. When I hover one item all are affected. Where is my mistake?

Here is the javascript code:

$(document).ready(function(){

    //Remove outline from links
    $("a").click(function(){
        $(this).blur();
    });

    //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({height:'200px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("li").mouseout(function(){
        $(this).stop().animate({height:'140px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

If the rest is also necessary please take a look at the fiddle code.

Answer 1

It’s about CSS. Bigger ‘li’ expands your ‘ul’. Try this:

$(document).ready(function(){

    //Remove outline from links
    $("a").click(function(){
        $(this).blur();
    });

    //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({marginTop:'-60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("li").mouseout(function(){
        $(this).stop().animate({marginTop:'0px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});​

http://jsfiddle.net/VpQkE/