jQuery实现下拉菜单
一、居中
1、块元素居中：给块元素本身设置：margin:0 auto;，块元素必须设置宽度
2、行内块元素居中：给元素父级设置text-algin:center;
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 list-style: none;
11 }
12 .nav{
13 width: 100%;
14 height: 40px;
15 background: #0044DD;
16 margin: 100px auto;
17 }
18 .nav .item{
19 /* font-size: 0;*/
20 width: 606px;
21 margin:0 auto;
22
23 }
24 .nav .item li{
25 font-size: 16px;
26 width: 100px;
27 height: 40px;
28 /* display: inline-block;*/
29 float: left;
30 line-height:40px;
31 text-align: center;
32 border-right: 1px solid #CCCCCC;
33 position: relative;
34 margin-bottom: 0;
35 }
36
37 .nav li a{
38 text-decoration: none;
39 color: #ffffff;
40 }
41 .nav .item ul{
42 position: absolute;
43 left:0;
44 top:40px;
45 display: none;
46 }
47 .nav .item ul li{
48 font-size: 16px;
49 width: 100px;
50 height: 40px;
51 background-color: #2B93D2;
52 border-top:1px solid #CCCCCC;
53
54 }
55 </style>
56 <script src="jquery-1.11.1.min.js"></script>
57 <script>
58 $(document).ready(function(){
59 /*$(".nav li").hover(function(){
60 $(this).children("ul").show();
61 },function(){
62 $(this).children("ul").hide();
63 });*/
64 $(".item li").hover(function(){
65 $(this).children("ul").slideToggle();
66 });
67 });
68 </script>
69 </head>
70 <body>
71 <div class="nav">
72 <ul class="item">
73 <li><a href="">网站首页</a>
74 <ul>
75 <li><a href="">案例展示</a></li>
76 <li><a href="">案例展示</a></li>
77 <li><a href="">案例展示</a></li>
78 </ul>
79 </li>
80 <li><a href="">新闻中心</a>
81 <ul>
82 <li><a href="">案例展示</a></li>
83 <li><a href="">案例展示</a></li>
84 <li><a href="">案例展示</a></li>
85 </ul>
86 </li>
87 <li><a href="">最新活动</a>
88 <ul>
89 <li><a href="">案例展示</a></li>
90 <li><a href="">案例展示</a></li>
91 <li><a href="">案例展示</a></li>
92 </ul></li>
93 <li><a href="">产品中心</a>
94 <ul>
95 <li><a href="">案例展示</a></li>
96 <li><a href="">案例展示</a></li>
97 <li><a href="">案例展示</a></li>
98 </ul></li>
99 <li><a href="">技术文章</a>
100 <ul>
101 <li><a href="">案例展示</a></li>
102 <li><a href="">案例展示</a></li>
103 <li><a href="">案例展示</a></li>
104 </ul>
105 </li>
106 <li class="last"><a href="">关于我们</a>
107 <ul>
108 <li><a href="">案例展示</a></li>
109 <li><a href="">案例展示</a></li>
110 <li><a href="">案例展示</a></li>
111 </ul>
112 </li>
113 </ul>
114 </div>
115 </body>
116 </html>
运行效果：
时间： 2024-10-08 00:52:13