【锋利的JQuery-学习笔记】菜单栏及其2级菜单
2020-12-10 04:32
标签：style blog class code java tar ext javascript color width art 效果图： 鼠标移动到菜单项后如下： html： css： js： 【锋利的JQuery-学习笔记】菜单栏及其2级菜单,搜素材,soscw.com 【锋利的JQuery-学习笔记】菜单栏及其2级菜单 标签：style blog class code java tar ext javascript color width art 原文地址：http://www.cnblogs.com/easy5weikai/p/3703127.html
div id="nav" class="mainNav">
ul class="nav">
li>a href="#">首 页a>li>
li>a href="#">品 牌a>
div class="jnNav">
div class="subitem">
dl class="fore">
dt>
a href="#nogo">品牌：a>
dt>
dd>
em >a href="#nogo">耐克a>em>
em >a href="#nogo">阿迪达斯a>em>
em >a href="#nogo">达芙妮a>em>
em >a href="#nogo">李宁a>em>
em >a href="#nogo">安踏a>em>
em >a href="#nogo">奥康a>em>
em >a href="#nogo">骆驼a>em>
em >a href="#nogo">特步a>em>
em >a href="#nogo">耐克a>em>
em >a href="#nogo">阿迪达斯a>em>
em >a href="#nogo">达芙妮a>em>
em >a href="#nogo">李宁a>em>
em class="noborder">a href="#nogo">特步a>em>
dd>
dl>
dl>
dt>
a href="#nogo">品牌：a>
dt>
dd>
em >a href="#nogo">耐克a>em>
em >a href="#nogo">阿迪达斯a>em>
em >a href="#nogo">达芙妮a>em>
em >a href="#nogo">李宁a>em>
em >a href="#nogo">安踏a>em>
em >a href="#nogo">奥康a>em>
em >a href="#nogo">骆驼a>em>
em >a href="#nogo">特步a>em>
em >a href="#nogo">耐克a>em>
em >a href="#nogo">阿迪达斯a>em>
em >a href="#nogo">达芙妮a>em>
em >a href="#nogo">李宁a>em>
em class="noborder">a href="#nogo">特步a>em>
dd>
dl>
div>
div>
li>
li>a href="#">女 装a>
div class="jnNav">
div class="subitem">
dl class="fore">
dt>
a href="#nogo">女 装：a>
dt>
dd>
em >a href="#nogo">耐克a>em>
em >a href="#nogo">阿迪达斯a>em>
em >a href="#nogo">达芙妮a>em>
em >a href="#nogo">李宁a>em>
em >a href="#nogo">安踏a>em>
em >a href="#nogo">奥康a>em>
em >a href="#nogo">骆驼a>em>
em >a href="#nogo">特步a>em>
em >a href="#nogo">耐克a>em>
em >a href="#nogo">阿迪达斯a>em>
em >a href="#nogo">达芙妮a>em>
em >a href="#nogo">李宁a>em>
em class="noborder">a href="#nogo">特步a>em>
dd>
dl>
dl>
dt>
a href="#nogo">女 装：a>
dt>
dd>
em >a href="#nogo">耐克a>em>
em >a href="#nogo">阿迪达斯a>em>
em >a href="#nogo">达芙妮a>em>
em >a href="#nogo">李宁a>em>
em >a href="#nogo">安踏a>em>
em >a href="#nogo">奥康a>em>
em >a href="#nogo">骆驼a>em>
em >a href="#nogo">特步a>em>
em >a href="#nogo">耐克a>em>
em >a href="#nogo">阿迪达斯a>em>
em >a href="#nogo">达芙妮a>em>
em >a href="#nogo">李宁a>em>
em class="noborder">a href="#nogo">特步a>em>
dd>
dl>
div>
div>
li>
li>a href="#">男 装a>
div class="jnNav">
div class="subitem">
dl class="fore">
dt>
a href="#nogo">男 装：a>
dt>
dd>
em >a href="#nogo">耐克a>em>
em >a href="#nogo">阿迪达斯a>em>
em >a href="#nogo">达芙妮a>em>
em >a href="#nogo">李宁a>em>
em >a href="#nogo">安踏a>em>
em >a href="#nogo">奥康a>em>
em >a href="#nogo">骆驼a>em>
em >a href="#nogo">特步a>em>
em >a href="#nogo">耐克a>em>
em >a href="#nogo">阿迪达斯a>em>
em >a href="#nogo">达芙妮a>em>
em >a href="#nogo">李宁a>em>
em class="noborder">a href="#nogo">特步a>em>
dd>
dl>
dl>
dt>
a href="#nogo">男 装：a>
dt>
dd>
em >a href="#nogo">耐克a>em>
em >a href="#nogo">阿迪达斯a>em>
em >a href="#nogo">达芙妮a>em>
em >a href="#nogo">李宁a>em>
em >a href="#nogo">安踏a>em>
em >a href="#nogo">奥康a>em>
em >a href="#nogo">骆驼a>em>
em >a href="#nogo">特步a>em>
em >a href="#nogo">耐克a>em>
em >a href="#nogo">阿迪达斯a>em>
em >a href="#nogo">达芙妮a>em>
em >a href="#nogo">李宁a>em>
em class="noborder">a href="#nogo">特步a>em>
dd>
dl>
div>
div>
li>
li>a href="#">鞋包配饰a>li>
ul>
div>
/*导航样式开始*/
.mainNav {
position: absolute;
top: 68px;
left: 0;
height: 37px;
line-height: 37px;
width: 990px;
z-index:100;
background-color: #4A4A4A;
}
.mainNav .nav {
display: inline;
float: left;
margin-left: 25px;
}
.mainNav ul li {
float:left;
display: inline;
margin-right:14px;
position: relative ;
z-index:100;
}
.mainNav ul li a {
display:block;
padding:0 8px;
font-weight:700;
color:#fff;
font-size:14px;
}
.mainNav ul li a:hover {
background:none;
}
/* 二级菜单 */
.jnNav {
background:#FFFFFF;
border: 1px solid #B1B1B1;
border-top:0;
left: 0;
overflow: hidden;
position: absolute;
top: 37px;
width: 474px;
z-index: 1000;
display:none;
}
.jnNav .subitem {
float: left;
height: auto !important;
min-height: 100px;
padding: 10px 12px;
width: 450px;
}
.jnNav .subitem dl {
border-top: 1px dashed #C4C4C4;
overflow: hidden;
padding: 8px 0;
float:left;
}
.jnNav .subitem .fore {
border-top-style: none;
padding-top: 0;
}
.jnNav .subitem dt {
float: left;
font-weight: bold;
line-height: 16px;
padding: 4px 3px;
text-align: center;
width: 76px;
}
.jnNav .subitem dt a {
color: #000;
font-weight: 700;
font-size:12px;
padding:0;
}
.jnNav .subitem dd {
float: left;
overflow: hidden;
padding: 0;
width: 364px;
}
.jnNav .subitem em {
border-right: 1px solid #CCCCCC;
float: left;
font-style: normal;
height: 14px;
line-height: 14px;
margin: 5px 0;
padding: 0 8px;
}
.jnNav .subitem em a {
color: #666666;
white-space: nowrap;
font-size:12px;
font-weight:normal;
padding:0;
}
.jnNav .subitem em.noborder {
border-right: 0 none;
}
//导航效果
$(function(){
$("#nav li").hover(function(){
$(this).find(".jnNav").show();
},function(){
$(this).find(".jnNav").hide();
});
})
上一篇：JS中模板嵌套学习(代码)