Hi Expert!

I want to create menu that functionality as following

Menu where the item that the mouse is over slides to the right. After the mouse leaves, I want the div to move back to its original position. 

My problem is, on mouse over, the div moves to the right, but when I mouse out, it just stays there and doesn't move back to the left.

<script> 

$(document).ready(function(){

   $(".menu_option").mouseenter(function(){

    $(".menu_option").animate({left:'50px'});

  });

  $(".menu_option").mouseleave(function(){

    $(".menu_option").animate({right:'50px'});

  });

});

</script> 

CSS line of code as following

.menu_option {

height: 50px;

width: 150px;

position: relative;

}

.menu_holder {

float: left;

height: 300px;

width: 150px;

position: relative;

}

HTML line of code as following 

<div class="menu_holder">

<div class="menu_option">Content for  class "menu_one" Goes Here</div>

</div>

Please help me!

Your help is greatly appreciated.

Thanks in advance!