Flexible accordian horizental menu

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function(){

    lastBlock = $("#a1");
    maxWidth = 92;
    minWidth = 46;   
     $(".nav ul li a").animate({width: minWidth+"px"}, { queue:false, duration:400 });
        $(".nav ul li a#a1").animate({width: maxWidth+"px"}, { queue:false, duration:400 });

     $(".nav ul li a").hover(function(){     
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
        $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
        lastBlock = this;
   
       }
    );
        $('.nav ul li a').mouseout(function() {
        $(".nav ul li a").animate({width: minWidth+"px"}, { queue:false, duration:400 });
        $(".nav ul li a#a1").animate({width: maxWidth+"px"}, { queue:false, duration:400 });});
});
</script>
<style type="text/css">


.nav ul{
width:100%;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color:#D7CBB3;
}

.nav ul li{
  float: left;
  padding:3px 2px 4px 2px;
  display: block;
  margin-right: 1px;
  text-align:center;
}

.nav ul li a{
  display: block;
  overflow: hidden;
   width: auto;
  text-decoration:none;
  color:#000;

}
.nav ul li a:hover{
  background-color:#219BDE;
  width: auto;
  text-decoration:none;
  color:#FFFFFF;
 }
 .nav ul li a.selected{
  background-color:#219BDE;
  width: auto;
  text-decoration:none;
  color:#FFFFFF;
 }
 #a1{
 width:auto;}

</style>

<div class="menu_container">
        <ul>
          <li><a id="a1" class="selected" href="index.php">HOME</a></li>
          <li><a href="biography.php">BIOGRAPHY</a></li>
          <li><a href="portfolio.php">PORTFOLIO</a></li>
          <li><a href="contactus.php">CONTACT US</a></li>
                  </ul>
      </div>