Создаем блок навигации в стиле Аккордеон

<div id="right">
<div class="over">
<p class="slide2"><a href="#" class="btn-slide2">Рубрики</a></p>
<div id="panel2">
<div class="block">
 <ul>
 </ul><ul class="aleft"><li>  <a href="#" title="Просмотреть все записи в рубрике Избранное">Избранное</a></li><li>
        <a href="#"  title="Просмотреть все записи в рубрике Новости">Новости</a></li><li>
        <a href="#" title="Просмотреть все записи в рубрике Стили CSS">Стили CSS</a></li></ul>
<ul class="aright"><li>
        <a href="#" title="Просмотреть все записи в рубрике Рубрика 2">Рубрика 2</a></li><li>
        <a href="#" title="Просмотреть все записи в рубрике Рубрика 3">Рубрика 3</a></li><li>
        <a href="#" title="Просмотреть все записи в рубрике Рубрика 4">Рубрика 4</a></li></ul>
 
<div style="clear:both;"></div>
</div>
</div>
<p class="slide3"><a href="#" class="btn-slide3">Архивы</a></p>
<div id="panel3">
<div class="block">
  <li class="arsip clearfix">
           <ul>
          <li><a href='#'  title='Сентябрь 2010'>Сентябрь 2010</a></li> 
        <li><a href='#'  title='Август 2010'>Август 2010</a></li> 
        <li><a href='#'  title='Июль 2010'>Июль 2010</a></li> 
        <li><a href='#'  title='Июнь 2010'>Июнь 2010</a></li> 
        <li><a href='#'  title='Май 2010'>Май 2010</a></li> 
        <li><a href='#'  title='Апрель 2010'>Апрель 2010</a></li> 
        <li><a href='#'  title='Март 2010'>Март 2010</a></li> 
        <li><a href='#'  title='Февраль 2010'>Февраль 2010</a></li> 
        <li><a href='#'  title='Январь 2010'>Январь 2010</a></li> 
        <li><a href='#'  title='Декабрь 2009'>Декабрь 2009</a></li>
        </ul>
        <br class="clear" />
      </li>
</div>
</div>
<p class="slide4"><a href="#" class="btn-slide4">Метки</a></p>
<div id="panel4">
<div class="block">
        <ul>
<a href='#'>Метка 1</a> 
<a href='#'>Метка 2</a> 
<a href='#'>Метка 3</a>  
<a href='#'>Метка 4</a> 
<a href='#'>Метка 5</a> 
<a href='#'>Подсказки</a>  
<a href='#'>интересно</a> 
<a href='#'>Программы</a> 
<a href='#'>jQuery</a> 
</ul>
</div>
</div>
<p class="slide"><a href="#" class="btn-slide">Блок на Ваш выбор</a></p>
<div id="panel">
<div class="block">
 Наполните этот блок любым содержанием        
</div>
</div> 
</div><!--over--></div>

#right {
float:right;
width:290px;
margin:23px 75px 0 0;
padding:0;
}
#panel, #panel2, #panel3, #panel4 {
   display: none;
}
.slide, .slide2, .slide3, .slide4{
   margin: 0px 0px 5px 0px;
   padding: 0;
   background: url(images/sl.gif) no-repeat center top;
}
.btn-slide, .btn-slide2, .btn-slide3, .btn-slide4  {
   width: 290px;
   height: 25px;
   padding-top: 4px;
   margin: 0 auto;
   display: block;
   font-family:  Arial, Tahoma, Trebuchet MS;
   text-shadow: 0 1px 0 #000;
   font-size: 11px;
   color: #f6f6f8 !important;
   text-decoration: none;
   text-transform:uppercase;
   padding-left:20px;
   font-weight:bold;
 
}
.over {
   margin:5px 0 20px 0;
   padding:0;
}
/* оформление блока с содержанием */
.block{
   margin:0 0 20px 0;
   padding:12px;
   background: #D8D8D8 url(images/sidebg.png);
   border:1px solid #aaa;
}
.aleft {
   float:left;
   width:120px;
}
 
.aright {
   float:left;
   width:120px;
}
 
br.clear {
   clear: both;
}
 
.arsip li {
   float: left;
   width: 120px;
}
 
.clearfix {
   display: inline-block;
}
 
ul{
   list-style-type: none;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
}
ul li{
   list-style-type: none;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 10px 0px;
}
a {
   color: #024153;
   text-decoration:none
}
a:hover, a:active {
   color: #576C72;
   text-decoration:none;
}

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src="js/slider.js" type="text/javascript"></script>

$(document).ready(function(){
        $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");            
        });
});
$(document).ready(function(){
        $(".btn-slide2").click(function(){
        $("#panel2").slideToggle("slow");
        });
});
$(document).ready(function(){
        $(".btn-slide3").click(function(){
        $("#panel3").slideToggle("slow");   
        });
});
 
$(document).ready(function(){
        $(".btn-slide4").click(function(){
        $("#panel4").slideToggle("slow");   
        });
});