<>强效果图:
<强>代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;脚本src=" http://www.21kevin.com/js/jquery-1.8.3.min.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script>
& lt;脚本src=" http://www.21kevin.com/js/move.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script>
& lt;风格类型=" text/css "比;
*{保证金:0;填充:0;}
.box{宽度:1100 px;高度:70 px;保证金:100 px汽车;背景:hotpink;填充:0 0 0 200 px; box-sizing: border-box;}
.nav{浮动:左;高度:70 px;行高:55 px;位置:相对,光标:指针;}
.nav-now{背景:url(图片/nav_now_bg.png)中心50 px不再重演;}
.nav h2{字体大小:24 px;}
.box .nav +。nav {margin-left: 50 px;}
.box .nav跨度{宽度:25 px;高度:25 px;位置:绝对的,背景:url(图片/nav_xiajiantou.png)中心不再重演;:15 px;右:-35 px;}
.nav ul{:绝对;背景:hotpink;宽度:160 px;最高:70 px;左:-15 px;显示:没有;}
李.nav ul {list-style:没有,行高:正常;填充:10 px 0 10 px 20 px;游标:指针;转型:padding-left 0.5年代缓解;}
.nav ul李:悬停{背景:黄绿色url(图片/nav_li_bg.png) 142 px中心不再重演;padding-left: 35 px;}
.nav:悬停{背景:url(图片/nav_now_bg.png)中心50 px不再重演;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="盒子"比;
& lt; div class=" nav has-nav nav-now”比;
& lt; h2>一级菜单& lt;/h2>
& lt; span> & lt;/span>
& lt; ul>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt;/ul>
& lt;/div>
& lt; div类=皀av has-nav”比;
& lt; h2>一级菜单& lt;/h2>
& lt; span> & lt;/span>
& lt; ul>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt;/ul>
& lt;/div>
& lt; div类=皀av has-nav”比;
& lt; h2>一级菜单& lt;/h2>
& lt; span> & lt;/span>
& lt; ul>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt; li>二级菜单& lt;/li>
& lt;/ul>
& lt;/div>
& lt; div类="导航"比;
& lt; h2>一级菜单& lt;/h2>
& lt;/div>
& lt;/div>
& lt;/body>
& lt; script>
$(函数(){
$ (" .has-nav ") .hover(函数(){
(美元);(ul) .slideDown(600年,“elasticOut”);
},函数(){
(美元);(ul)鸡毛蒜皮().slideUp (100);
});
$ (" .nav ") .click(函数(){
(美元).addClass (nav-now) .siblings () .removeClass (“nav-now”)
})
})
& lt;/script>
& lt;/html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
