<div class="box">
   
  <ul id="tabMenu">
  <li class="posts selected"></li>  
  <li class="comments"></li>
  <li class="category"></li>
  <li class="famous"></li>
  <li class="random"></li>
  </ul>
   
  <div class="boxTop"></div>
   
  <div class="boxBody">
   
  <div id="posts" class="show parent">
  <ul>
  <li>Post 1</li>
  <li>Post 2</li>
  <li class="last">Post 3</li>
  </ul>  
  </div>  
   
  <div id="comments" class="parent">
  <ul>
  <li>Comment 1</li>
  <li>Comment 2</li>
  <li class="last">Comment 3</li>
  </ul>
  </div>
   
  <div id="category" class="parent">
  <ul>
  <li>Category 1</li>
  <li>Category 2</li>
  <li class="last">Category 3</li>
  </ul>  
  </div>
   
  <div id="famous" class="parent">
  <ul>
  <li>Famous post 1</li>
  <li>Famous post 2</li>
  <li class="last">Famous post 3</li>
  </ul>  
  </div>
   
  <div id="random" class="parent">
  <ul>
  <li>Random post 1</li>
  <li>Random post 2</li>
  <li class="last">Random post 3</li>
  </ul>  
  </div>  
   
  </div>
   
  <div class="boxBottom"></div>
   
</div>

<style>
   
a {
  color:#ccc;
  text-decoration:none;
}
   
a:hover {
  color:#ccc;
  text-decoration:none
}
   
#tabMenu {
  margin:0;
  padding:0 0 0 15px;
  list-style:none;
}
   
#tabMenu li {
  float:left;
  height:32px;
  width:39px;
  cursor:pointer;
  cursor:hand
}
   
/* this is the button images */
li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;}
li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;}
li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;}
   
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}
   
.box {
  width:227px
}
   
.boxTop {
  background:url(images/boxTop.gif)no-repeat;
  height:11px;
  clear:both
}
   
.boxBody {
  background-color:#282828;
}
   
.boxBottom {
  background:url(images/boxBottom.gif) no-repeat;
  height:11px;
}
   
.boxBody div.parent {
  display:none;
}
   
.boxBody div.show {
  display:block;
}
   
   
.boxBody #category a {
  display:block
}
   
/* styling for the content*/
.boxBody div ul {
  margin:0 10px 0 25px;
  padding:0;
  width:190px;
  list-style-image:url(images/arrow.gif)
}
   
.boxBody div li {
  border-bottom:1px dotted #8e8e8e;  
  padding:4px 0;
  cursor:hand;
  cursor:pointer
}
   
.boxBody div ul li.last {
  border-bottom:none
}
   
.boxBody div li span {
  font-size:8px;
  font-style:italic;  
  color:#888;
}
   
/* IE Hacks */
*html .boxTop {margin-bottom:-2px;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}
   
</style>

<script type="text/javascript" src="/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
   
$(document).ready(function() {  
   
  //Get all the LI from the #tabMenu UL
  $('#tabMenu li').click(function(){
   
  //perform the actions when it's not selected
  if (!$(this).hasClass('selected')) {  
   
  //remove the selected class from all LI  
  $('#tabMenu li').removeClass('selected');
   
  //Reassign the LI
  $(this).addClass('selected');
   
  //Hide all the DIV in .boxBody
  $('.boxBody div.parent').slideUp('1500');
   
  //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
  $('.boxBody div.parent:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
   
  }
  }).mouseover(function() {
   
  //Add and remove class, Personally I dont think this is the right way to do it,  
  //if you have better ideas to toggle it, please comment  
  $(this).addClass('mouseover');
  $(this).removeClass('mouseout');  
   
  }).mouseout(function() {  
   
  //Add and remove class
  $(this).addClass('mouseout');
  $(this).removeClass('mouseover');  
   
  });
   
   
  //Mouseover with animate Effect for Category menu list <img src="http://s51.ucoz.net/sm/1/smile.gif" border="0" align="absmiddle" alt="smile" />
  $('.boxBody #category li').mouseover(function() {
   
  //Change background color and animate the padding
  $(this).css('backgroundColor','#888');
  $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  }).mouseout(function() {
   
  //Change background color and animate the padding
  $(this).css('backgroundColor','');
  $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  });  
   
  //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  $('.boxBody li').click(function(){
  window.location = $(this).find("a").attr("href");
  }).mouseover(function() {
  $(this).css('backgroundColor','#888');
  }).mouseout(function() {
  $(this).css('backgroundColor','');
  });  
   
});
   
</script>