.mouseenter and .mouseleave not working properly

Question

lately I've been attempting to create a dropdown menu (I'm new to javascript and jQuery). I tried to do this using functions .mouseenter and .mouseleave in this way:

    $('.slideOne')
.mouseenter(function() {
    $('#one').animate({
    left: '10%'
    },100)
.mouseleave(function() {
    $('#one').animate({
    left: '-250px'
    },100);
    }); 
});

Everything works, but not really the way I expected it to. You can see the result on fiddle:

Full screen result

and the full code:

Fiddle

Hopefully you can see the ul's not necessarily appear when mouse is over the aproppriate li and they do not necessarily disappear after the mouse goes away.

Maybe someone has encoutered this problem? Or is there a better way for creating what I was trying to?

Answer 1

Here is an alternative way using .hover()

FIDDLE

$('.slideOne').hover(function () {
    $('#one').animate({
        left: '10%'
    }, 100)
}, function () {
    console.log('dgfh');
    $('#one').animate({
        left: '-250px'
    }, 100);
});

$('.slideTwo').hover(function () {
    $('#two').animate({
        left: '14%'
    }, 100);
}, function () {
    $('#two').animate({
        left: '-250px'
    }, 100);
});