我编写的二级导航

最新推荐文章于 2024-06-14 11:01:38 发布

weixin_34092455

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量39

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/yidianshishang/archive/2012/12/30/2839608.html

版权

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
 7 <script type="text/javascript">
 8 $(function(){
 9     var $nav=$('.nav');
10     var menu_2=('.menu_2');
11     $nav.mousemove(function(){$(this).find(menu_2).slideDown(500)});
12     $nav.mouseleave(function(){$(this).find(menu_2).slideUp(500)});
13         
14         
15     })
16 </script>
17 <style type="text/css">
18 *{padding:0px;margin:0px;}
19 ul,li{list-style-type:none;}
20 body{font-size:14px;font-family:Arial, Helvetica, sans-serif;color:#000}
21 div{margin:50px auto;height:30px;}
22 .menu{height:30px;float:left;}
23 .nav{float:left;width:100px;height:30px;line-height:30px;text-align:center;position:relative;margin-left:1px;background:#CCC;}
24 .ys1{width:100%;height:30px;display:block;float:left;line-height:30px;text-align:center;text-decoration:none;color:#FFF;}
25 .nav:hover .ys1{background:#06F;}
26 .menu_2{width:100px;float:left;position:absolute;top:30px;left:0px;display:none;}
27 .nav_2{width:100px;float:left;height:20px;margin-top:1px;line-height:20px;color:#FFF;text-align:center;background:#09C;}
28 .ys2{width:100px;height:20px;display:inline;float:left;color:#FFF;text-decoration:none;}
29 .ys2:hover{background:#0CF;}
30 
31 </style>
32 </head>
33 
34 <body>
35 <div>
36 <ul class="menu">
37     <li class="nav"><a href="#" class="ys1">测试页面</a>
38         <ul class="menu_2">
39             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
40             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
41             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
42             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
43             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
44             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
45             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
46         </ul>
47     </li>
48     
49     <li class="nav"><a href="#" class="ys1">测试页面</a>
50         <ul class="menu_2">
51             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
52             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
53             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
54             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
55             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
56             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
57             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
58         </ul>
59     </li>
60     
61     <li class="nav"><a href="#" class="ys1">测试页面</a>
62         <ul class="menu_2">
63             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
64             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
65             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
66             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
67             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
68             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
69             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
70         </ul>
71     </li>
72     
73     <li class="nav"><a href="#" class="ys1">测试页面</a>
74         <ul class="menu_2">
75             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
76             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
77             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
78             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
79             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
80             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
81             <li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
82         </ul>
83     </li>
84    
85 </ul></div>
86 </body>
87 </html>

二级导航下拉菜单，供新手学习！！高手直接无视！！

转载于:https://www.cnblogs.com/yidianshishang/archive/2012/12/30/2839608.html

weixin_34092455

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我编写的二级导航

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head&...
复制链接

扫一扫