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>

Jquery Content Tab in Table

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

    //When page loads...
    $("div.tab_content").hide(); //Hide all content
    $("table.affiliate_table td a#check:first").addClass("active").show(); //Activate first tab
    $("div.tab_content:first").show(); //Show first tab content

    //On Click Event
    $("table.affiliate_table td#nav a#check").click(function() {

        $("table.affiliate_table td a#check").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $("div.tab_content").hide(); //Hide all tab content

        var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});
</script>

<style type="text/css">

html table.affiliate_table1 td#nav a#check.active { 
 background:#ccc; 
}

 .tab_container {
 border: 1px solid #999;
 border-top: none;
 overflow: hidden;
 clear: both;
 float: left; width: 100%;
 background: #fff;
}
.tab_content {
 padding: 20px;
 font-size: 1.2em;
}
</style>

<table width="100%"  class="affiliate_table">

<tr> 

<td id="nav"><a id="check" href="#tab1">View</a>&nbsp;/&nbsp; 

<a href="http://www.google.co.in/">Edit</a></td>

<tr> 

</table>

<div class="tab_content"  id="tab1">
  <table width="100%" border="0"  class="affiliate_table">
  <tr>
   <td width="23%"><strong>Name</strong></td>
   <td width="77%">Test</td>
  </tr>

</table>

</div>