代码：

HTML部分：

<div class="box">
  <ul class="mod-bar">
    <li>
      <a href="http://bolg.changyisy.com" target="_blank"><span>概述</span></a>
    </li>
    <li>
      <a href="javascript:void(0);"><span>全局设置</span></a>
      <ul style=" display:none;">
        <li><a href="http://bolg.changyisy.com" target="_blank"><span>站点信息</span></a></li>
        <li><a href="http://bolg.changyisy.com" target="_blank"><span>注册与访问控制置</span></a></li>
        <li><a href="http://bolg.changyisy.com" target="_blank"><span>时间设置</span></a></li>
        <li><a href="http://bolg.changyisy.com" target="_blank"><span>邮件设置</span></a></li>
        <li><a href="http://bolg.changyisy.com" target="_blank"><span>评论设置</span></a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);"><span>类目管理</span></a>
      <ul style="display:none;">
        <li><a href="http://bolg.changyisy.com" target="_blank"><span>菜单管理</span></a></li>
        <li><a href="http://bolg.changyisy.com" target="_blank"><span>分类管理</span></a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);"><span>文章管理</span></a>
      <ul style=" display:none;">
        <li><a href="http://bolg.changyisy.com" target="_blank"><span>新建</span></a></li>
        <li><a href="http://bolg.changyisy.com" target="_blank"><span>所有文章</span></a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);"><span>页面管理</span></a>
      <ul style=" display:none;">
        <li><a href="http://bolg.changyisy.com" target="_blank"><span>新建</span></a></li>
        <li><a href="http://bolg.changyisy.com" target="_blank"><span>所有页面</span></a></li>
      </ul>
    </li>
  </ul>
</div>

CSS部分：

<style>
*{ margin:0; padding:0;}
ul,ol,li{ list-style:none;}
a{ text-decoration:none;}
.mod-bar > li{ border-bottom:1px solid #434343;}
.mod-bar > li a{ display:block; padding-left:25px; height:36px; line-height:36px; background:#3f3f3f; color:#fff; font-size:16px;}
.mod-bar > li a:hover{background:#323232;color:#fff;}
.mod-bar > li ul li{ border-bottom:1px solid #434343;}
.mod-bar > li ul li a{ height:32px; line-height:32px; font-size:14px; text-indent:2em;}
.mod-bar > li > a.active{ border-color:#207fbd; background:#3695d5;}
</style>

JS部分：

<script>
$('.mod-bar > li > a').click(function(){
  if($(this).next().is(':visible')){
    $(this).next().slideUp('');
    $(this).removeClass('active');
  }else{
    $('.mod-bar').find('li').children('ul').slideUp('slow');
    $(this).addClass('active').parent().siblings().find('a').removeClass('active');
    $(this).next().slideDown('');
  }
});
</script>