知识点
相关文章
更多最近更新
更多二级下拉菜单
2019-03-02 00:54|来源: 网路
<!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
相关问答
更多-
电脑二级excel[2022-02-20]
vlookup的范围地址要锁定，采用绝对引用 $a$4:$c$21 或者使用整列a:c -
如何用JAVA来实现下拉菜单的功能[2023-02-03]
import java.awt.*; import java.awt.event.*; class xl Frame implements ItemListener //借口 { static Choice chc=new Choice();//创建下拉框的对象 } public static void main(String args[]) { frm.setLayout(new FlowLayout());//创建布局格式 frm.setSize(200,200);//设置框架大小 frm.add(ch ... -
二级域名和二级目录哪个好?[2024-01-13]
各有各的好处 如果在主域名很强的情况下 做二级域名是最好的主域名不强的情况下就做二级目录 来增加主域名的权重 然后主域名很强后在做二级域名！ -
jquery下拉菜单[2022-02-28]
这里有一个js的多级联动下拉菜单 可以自定义位置和样式 比较实用 里面有教程和源码 -
二级菜单下拉样式(Secondary Menu Drop Down Styling)[2023-05-07]
首先，第二级ul应该放在第一级li里面。 所以标记看起来应该是这样的： -
在li:hover之后添加> li:hover >选择元素的唯一第一个子元素（直接子元素）。 你当前的代码是说阻止（显示）鼠标悬停的所有ul 。 请查看此以获取更多信息。 li:hover > ul, li.over > ul { display: block; } DEMO Add > after the li:hover > selects the only first child (direct child) of the element. Your current code is say ...
-
您可以使用以下CSS： ul.menu_top { float:left; width:70%; margin: 8px 100px 0 0; border-radius:4px; background-color: #c4092a; list-style-type: none; z-index:+1; } ul.menu_top li { float: left; position: relative; margin: 4px ...
-
该页面上有一个强制背景颜色的内部CSS代码。 您只能通过使用内联CSS代码或在主题块之后插入另一个内部CSS代码来覆盖它。 您可以编辑footer.php文件并在代码下面插入： There's an internal CSS code on that page that forces the background color ...
-
css二级下拉菜单(css second level drop down menu)[2021-12-16]
使用本教程http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery 或查看http://jsfiddle.net/RdcVk/3/ use this tutorial http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery or ... -
下拉菜单的可用性(Usability of Dropdown Menus)[2022-09-17]
实际上有一个名为Hover Intent Interval和Hover Intent Timeout的jquery方法。 你问的是什么，你可以设置一个超时，所以如果他们将鼠标悬停在菜单上然后将其悬停，则需要500ms来设置动画，反之亦然（动画输入）。 这里有更多信息的链接，也尝试做一些谷歌搜索我确定有更好的资源： http ： //cherne.net/brian/resources/jquery.hoverIntent.html 我过去使用megamenus的另一种方法是用户必须点击打开/动画菜单然后它保 ...