how to animate vertical menu on hover or on click

how to animate vertical menu on hover or on click

on hover i want to pop out that menu by increasing the width an d height of li ....but as i over that menu is going in the last and not getting animated plz suggest

function justclick(e)
{   
    $("#" + prevClick).removeClass("active");

  $("#" + e.id).animate({
    width: "200px",
height:"50px",
fontSize: "24px",
    borderWidth: "5px"
  }, 1500,function() {
 $("#" + e.id).addClass("active");
 
}  
 
);

   // $("#" + e.id).animate({opacity: 0.1}, 'slow', function() {
//$("#" + e.id).addClass("active");
   
     //  $("#" + e.id).animate({opacity: 1});
   //   });
   prevClick = e.id;
}


<div>
 <ul style="list-style:none" id="nav">
    <li style="height:35px;width:100px;margin-right:0px;"><a href="#intro" id="home" class='active' onclick="justclick(this)" style="width:74px;height:28px;">HOME</a></li>
   <li style="height:35px;width:100px;margin-right:0px;"><a href="#second" id="about"  onclick="justclick(this)" style="width:100px;height:28px; ">ABOUT</a></li>
   <li style="height:35px;width:100px;margin-right:0px;"><a href="#third" id="media" onclick="justclick(this)" style="width:100px;height:28px;">MEDIA</a></li>
<li style="height:35px;width:100px;margin-right:0px;"><a href="#fourth" id="brands" onclick="justclick(this)" style="width:100px;height:28px;">BRANDS</a></li>
        <li style="height:35px;width:100px;margin-right:0px;"><a href="#fifth" id="events" onclick="justclick(this)" style="width:100px;height:30px;">EVENTS</a></li>
   <li style="height:35px;width:100px;margin-right:0px;"><a href="#sixth" id="contacts" onclick="justclick(this)" style="width:100px;height:30px;">CONTACTS</a></li>
        <li style="height:35px;width:100px;margin-right:0px;"><a href="#seventh" id="resources" onclick="justclick(this)" style="width:100px;height:30px;">RESOURCES</a></li>
</ul>

</div>