二级下拉菜单

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

时间: 2024-10-29 19:09:58

二级下拉菜单的相关文章

纯CSS3实现宽屏二级下拉菜单

今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Javascript,展示速度当然是非常快的. 在线预览   源码下载

如何实现导航菜单栏中的二级下拉菜单?

我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <meta charset="UTF-8"> <title>Documen

CSS3实现的横向二级下拉菜单代码实例

CSS3实现的横向二级下拉菜单代码实例:横向二级下拉菜单是非常常用的效果,例如很多网站的导航栏就是这样的二级下拉菜单效果,非常好用,本章节分享一段使用CSS3实现的下拉菜单,当然当下很多浏览器都不支持,不过相信用不了多久这种现状就会被改变.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

用三种方式实现导航菜单中的二级下拉菜单

如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit

行内/块级垂直居中、图像文本替换以及二级下拉菜单的制作

经过近一个月对HTML与css的学习,利用HTML以及div+css对简单的静态网页进行简单的布局有了一定的基础,但是对于网页结构布局的分析.部分属性的使用存在着问题,希望在以后的学习能有所提高,这里就最近的学习情况进行一下总结与归纳: 一.行内元素与块级元素水平.垂直居中问题 (一)CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px}

CSS3蓝色宽屏二级下拉菜单DEMO演示

<!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 name="viewport"

CSS+JS感应鼠标展开的的二级下拉菜单

<!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> <title>CSS+JS感应鼠标展开的的二级下拉菜单丨

jQuery和CSS3超酷二级下拉菜单插件

这是一款效果很酷又简单实用的jQuery二级下拉菜单特效,该特效在点击触发按钮后,二级下拉菜单会向下滑动覆盖原来的主菜单,关闭后二级下拉菜单又向上滑动回去,二级菜单不占用多余的空间. 这个菜单插件是替代标准的二级下拉菜单的好方法,特别是在你想显示更多的二级子菜单的时候.另外,你可以十分容易的自定义二级下拉菜单的样式,多添加一个搜索框或登录注册表单等等. 在线演示:http://www.htmleaf.com/Demo/201502271428.html 下载地址:http://www.htmle

boostrapt的二级下拉菜单

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style&qu