<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://www.quhuu.com/quhuu/templets/quhuu/js/jquery.js"></script>
<style type="text/css">
ul#menu, ul#menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 100%;
}
ul#menu a {
display: block;
text-decoration: none;
}
ul#menu li {
margin: 0;
}
ul#menu li ul li {
margin: 1px 0;
}
ul#menu li a {
background: #EBEEF1;
color: #464D6A;
padding: 0.5em;
cursor:pointer;
}
ul#menu li .nav-header {
font-size:14px;
border-bottom: 1px solid #D7DDE6;
position:relative;
}
ul#menu li .nav-header:hover {
background-color: #DDE4EB;
}
ul#menu li .nav-header .new, ul#menu li ul li a .new {
position: absolute;
top: 50%;
right: 6px;
width: 23px;
height: 11px;
margin-top: -6px;
z-index: 10;
background: url(../images/icon_new.gif) no-repeat transparent;
display: block;
border: 0 none;
}
ul#menu li ul li a {
display: block;
font-size: 12px;
padding: 7px 10px 7px 20px;
color: #333;
padding-left: 42px;
border-bottom: 0px solid #F3F3F3;
background-position: 25px 50%;
background-image: url(../images/menuarrow.png);
background-repeat: no-repeat;
text-decoration: none;
background-color:#f8f8f8;
position: relative;
}
ul#menu li ul li:last-child {
border-bottom: 1px solid #D7DDE6;
}
ul#menu li ul li a:hover {
background-color: #fff;
border-left: 5px #359ECF solid;
padding-left: 15px;
background-position: -5px 50%;
}
ul#menu li.selected a {
background: #fff;
border-left: 5px #359ECF solid;
padding-left: 15px;
color: #359ECF;
}
ul#menu li .nav-header i {
margin-right: 10px;
text-align: center;
}
.none {
display: none;
}
.tips {
position: relative;
z-index: 2;
}
.tips:hover {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
z-index: 3;
}
.tips span {
background-color: #090;
border: 1px solid #090;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
color: #fff;
display: none;
font-size: 12px;
left: 5px;
line-height: 18px;
padding: 6px 6px 4px;
position: absolute;
text-align: left;
top: 25px;
width: 350px;
}
.tips:hover span {
display: block;
}
.tips span:before {
border-color: #090 transparent;
border-style: solid;
border-width: 0 8px 8px;
bottom: 100%;
content: "";
height: 0;
left: 10px;
position: absolute;
width: 0;
}
.tips span:after {
border-color: #090 transparent;
border-style: solid;
border-width: 0 6px 6px;
bottom: 100%;
content: "";
height: 0;
left: 12px;
position: absolute;
width: 0;
}
ul#menu li .nav-header {
background: url("http://quhuu.com/quhuu/templets/quhuu/css/../images/jia.gif") no-repeat scroll 12px 50% #ebeef1;
text-indent: 23px;
}
ul#menu li a.active {
background: url("http://quhuu.com/quhuu/templets/quhuu/css/../images/jian-.gif") no-repeat scroll 12px 50% #ebeef1;
text-indent: 23px;
}
</style>
</head>
<body>
<ul id="menu">
<li><a class="nav-header active">微活动</a>
<ul class="ckit" style="display: block;">
<li><a href="#">优惠券活动</a></li>
<li><a href="#">微会员</a></li>
<li><a href="/quhuu/gongneng/weihuodong/weidiaoyan.html">微调研</a></li>
<li><a href="/quhuu/gongneng/weihuodong/dazhuanpan.html">微信大转盘</a></li>
<li><a href="/quhuu/gongneng/weihuodong/weitoupiao.html">微投票</a></li>
<li><a href="/quhuu/gongneng/weihuodong/guaguale.html">刮刮乐活动</a></li>
</ul>
</li>
<li><a class="nav-header">微网站</a>
<ul class="ckit" style="display: none;">
<li><a href="/quhuu/gongneng/weiwangzhang/weixiangce.html">微相册</a></li>
<li><a href="/quhuu/gongneng/weiwangzhang/weiguanwang.html">微官网</a></li>
</ul>
</li>
<li><a class="nav-header">行业模块</a>
<ul class="ckit" style="display: none;">
<li><a href="/quhuu/gongneng/hangyemokuai/wenjuandiaocha.html">问卷调查</a></li>
<li><a href="/quhuu/gongneng/hangyemokuai/weiliuyan.html">微留言</a></li>
<li><a href="/quhuu/gongneng/hangyemokuai/weiyuyue.html">微预约</a></li>
<li><a href="/quhuu/gongneng/hangyemokuai/weidingdan.html">微定单</a></li>
<li><a href="/quhuu/gongneng/hangyemokuai/weijiudian.html">微酒店</a></li>
<li><a href="/quhuu/gongneng/hangyemokuai/weicanyin.html">微餐饮</a></li>
<li><a href="/quhuu/gongneng/hangyemokuai/weiqiche.html">微汽车</a></li>
<li><a href="/quhuu/gongneng/hangyemokuai/weifangchan.html">微房产</a></li>
<li><a href="/quhuu/gongneng/hangyemokuai/weixitie.html">微喜贴</a></li>
<li><a href="/quhuu/gongneng/hangyemokuai/weituangou.html">微团购</a></li>
</ul>
</li>
<li><a class="nav-header">高级模块</a>
<ul class="ckit" style="display: none;">
<li><a href="/quhuu/gongneng/gaojimokuai/weitongji.html">微统计</a></li>
</ul>
</li>
<li><a class="nav-header">如乐功能</a>
<ul class="ckit" style="display: none;">
<li><a href="/quhuu/gongneng/yulegongneng/wangluodianying.html">网络电影搜索</a></li>
<li><a href="/quhuu/gongneng/yulegongneng/wangluoyinyue.html">网络音乐搜索</a></li>
<li><a href="/quhuu/gongneng/yulegongneng/shigejianshang.html">诗歌鉴赏</a></li>
<li><a href="/quhuu/gongneng/yulegongneng/chengyujielong.html">成语接龙</a></li>
<li><a href="/quhuu/gongneng/yulegongneng/miyu.html">谜语</a></li>
<li><a href="/quhuu/gongneng/yulegongneng/qiushi.html">糗事</a></li>
<li><a href="/quhuu/gongneng/yulegongneng/renpinjisuan.html">人品计算</a></li>
<li><a href="/quhuu/gongneng/yulegongneng/jiankangzhishu.html">健康指数查询</a></li>
<li><a href="/quhuu/gongneng/yulegongneng/yinyuehe.html">音乐盒</a></li>
</ul>
</li>
<li><a class="nav-header">基础功能</a>
<ul class="ckit" style="display: none;">
<li><a href="/quhuu/gongneng/jichugongneng/zidingyicaidan.html">自定义菜单</a></li>
<li><a href="/quhuu/gongneng/jichugongneng/jiachedaohang.html">驾车导航</a></li>
<li><a href="/quhuu/gongneng/jichugongneng/xidingyituwen.html">自定义图片推送</a></li>
<li><a href="/quhuu/gongneng/jichugongneng/chengyuzidian.html">成语字典</a></li>
<li><a href="/quhuu/gongneng/jichugongneng/xiaohua.html">笑话</a></li>
<li><a href="/quhuu/gongneng/jichugongneng/gongjiaochaxun.html">公交查询</a></li>
<li><a href="/quhuu/gongneng/jichugongneng/shoujiguishudi.html">手机归属地查询</a></li>
<li><a href="/quhuu/gongneng/jichugongneng/kuaidichaxun.html">快递查询</a></li>
<li><a href="/quhuu/gongneng/jichugongneng/tianqichaxun.html">天气查询</a></li>
<li><a href="/quhuu/gongneng/jichugongneng/lsb.html">LSB定位</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(".nav-header").click(function(){
$(".ckit").each(function(){
$(this).slideUp(‘normal‘);
});
$(".nav-header").each(function(){
$(this).removeClass(‘active‘);
});
$(this).addClass("active");
$(this).next(".ckit").slideDown(‘normal‘);
});
$(".selected").parent(".ckit").slideDown(0);
$(".selected").parent(".ckit").prev(".nav-header").addClass("active");
</script>
</body>
</html>
原文：http://www.cnblogs.com/smallpigdream/p/3870387.html