<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>