首页 > 代码库 > 二级下拉菜单
二级下拉菜单
<!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="http://www.mamicode.com/#">优惠券活动</a></li><li><a href="http://www.mamicode.com/#">微会员</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/weihuodong/weidiaoyan.html">微调研</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/weihuodong/dazhuanpan.html">微信大转盘</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/weihuodong/weitoupiao.html">微投票</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/weihuodong/guaguale.html">刮刮乐活动</a></li> </ul> </li> <li><a class="nav-header">微网站</a> <ul class="ckit" style="display: none;"> <li><a href="http://www.mamicode.com/quhuu/gongneng/weiwangzhang/weixiangce.html">微相册</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/weiwangzhang/weiguanwang.html">微官网</a></li> </ul> </li> <li><a class="nav-header">行业模块</a> <ul class="ckit" style="display: none;"> <li><a href="http://www.mamicode.com/quhuu/gongneng/hangyemokuai/wenjuandiaocha.html">问卷调查</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/hangyemokuai/weiliuyan.html">微留言</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/hangyemokuai/weiyuyue.html">微预约</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/hangyemokuai/weidingdan.html">微定单</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/hangyemokuai/weijiudian.html">微酒店</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/hangyemokuai/weicanyin.html">微餐饮</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/hangyemokuai/weiqiche.html">微汽车</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/hangyemokuai/weifangchan.html">微房产</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/hangyemokuai/weixitie.html">微喜贴</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/hangyemokuai/weituangou.html">微团购</a></li> </ul> </li> <li><a class="nav-header">高级模块</a> <ul class="ckit" style="display: none;"> <li><a href="http://www.mamicode.com/quhuu/gongneng/gaojimokuai/weitongji.html">微统计</a></li> </ul> </li> <li><a class="nav-header">如乐功能</a> <ul class="ckit" style="display: none;"> <li><a href="http://www.mamicode.com/quhuu/gongneng/yulegongneng/wangluodianying.html">网络电影搜索</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/yulegongneng/wangluoyinyue.html">网络音乐搜索</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/yulegongneng/shigejianshang.html">诗歌鉴赏</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/yulegongneng/chengyujielong.html">成语接龙</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/yulegongneng/miyu.html">谜语</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/yulegongneng/qiushi.html">糗事</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/yulegongneng/renpinjisuan.html">人品计算</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/yulegongneng/jiankangzhishu.html">健康指数查询</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/yulegongneng/yinyuehe.html">音乐盒</a></li> </ul> </li> <li><a class="nav-header">基础功能</a> <ul class="ckit" style="display: none;"> <li><a href="http://www.mamicode.com/quhuu/gongneng/jichugongneng/zidingyicaidan.html">自定义菜单</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/jichugongneng/jiachedaohang.html">驾车导航</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/jichugongneng/xidingyituwen.html">自定义图片推送</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/jichugongneng/chengyuzidian.html">成语字典</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/jichugongneng/xiaohua.html">笑话</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/jichugongneng/gongjiaochaxun.html">公交查询</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/jichugongneng/shoujiguishudi.html">手机归属地查询</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/jichugongneng/kuaidichaxun.html">快递查询</a></li><li><a href="http://www.mamicode.com/quhuu/gongneng/jichugongneng/tianqichaxun.html">天气查询</a></li><li><a href="http://www.mamicode.com/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> 
二级下拉菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。