jquery二级菜单思路怎么写？
鼠标悬停，二级菜单怎么写？我有点乱，我悬停一个菜单，调出了所有二级的菜单。不知道怎么办，求思路？求思路，没分了，1个小时以内会采纳的。...
鼠标悬停，二级菜单怎么写？
我有点乱，我悬停一个菜单，调出了所有二级的菜单。不知道怎么办，求思路？
求思路，没分了，1个小时以内会采纳的。 展开
我有点乱，我悬停一个菜单，调出了所有二级的菜单。不知道怎么办，求思路？
求思路，没分了，1个小时以内会采纳的。 展开
1个回答
展开全部
jquery实现二级菜单
HTML
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=" utf-8">
5 <meta name="author" content="/" />
6 <title>点击实现下拉菜单的隐藏与显示</title>
7 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
8 <script src="index.js"></script>
<link type="stylesheet" type="text/css" href="style.css" />
9 </head>
10 <body>
11 <div>
12 <ul class="nav">
13 <li>
14 <a href="#">蚂蚁部落</a>
15 <ul>
16 <li>DIV+CSS专区</li>
17 <li>jQuery专区</li>
18 <li>搜索优化</li>
19 <li>站长交流</li>
20 </ul>
21 </li>
22 <li>
23 <a href="#">站长交流</a>
24 <ul>
25 <li>DIV+CSS专区</li>
26 <li>jQuery专区</li>
27 <li>搜索优化</li>
28 <li>站长交流</li>
29 </ul>
30 </li>
31 <li>
32 <a href="#">站长交流</a>
33 <ul>
34 <li>DIV+CSS专区</li>
35 <li>jQuery专区</li>
36 <li>搜索优化</li>
37 <li>站长交流</li>
38 </ul>
39 </li>
40 <li>
41 <a href="#">站长交流</a>
42 <ul>
43 <li>DIV+CSS专区</li>
44 <li>jQuery专区</li>
45 <li>搜索优化</li>
46 <li>站长交流</li>
47 </ul>
48 </li>
49 </ul>
50 </div>
51 </body>
52 </html>
style.css
1 * {
2 margin: 0px;
3 padding: 0px;
4 }
5 ul {
6 list-style: none;
7 margin: 0px auto;
8 font-size: 14px;
9 }
10 .nav li {
11 width: 150px;
12 height: 25px;
13 line-height: 25px;
14 text-align: center;
15 float: left;
16 background-color: #ccc;
17 position: relative;
18 //font-size: 14px;
19 }
20 .nav li a {
21 text-decoration: none;
22 color: #666;
23 }
24 .nav li ul {
25 position: absolute;
26 top: 25px;
27 display: none;
28 font-size: 12px;
29 }
index.js
1 $(function(){
2 $('.nav li').hover(function(){
3 $(this).find('ul').css('display', 'block');
4 }, function(){
5 $(this).find('ul').css('display', 'none');
6 });
7 });
HTML
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=" utf-8">
5 <meta name="author" content="/" />
6 <title>点击实现下拉菜单的隐藏与显示</title>
7 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
8 <script src="index.js"></script>
<link type="stylesheet" type="text/css" href="style.css" />
9 </head>
10 <body>
11 <div>
12 <ul class="nav">
13 <li>
14 <a href="#">蚂蚁部落</a>
15 <ul>
16 <li>DIV+CSS专区</li>
17 <li>jQuery专区</li>
18 <li>搜索优化</li>
19 <li>站长交流</li>
20 </ul>
21 </li>
22 <li>
23 <a href="#">站长交流</a>
24 <ul>
25 <li>DIV+CSS专区</li>
26 <li>jQuery专区</li>
27 <li>搜索优化</li>
28 <li>站长交流</li>
29 </ul>
30 </li>
31 <li>
32 <a href="#">站长交流</a>
33 <ul>
34 <li>DIV+CSS专区</li>
35 <li>jQuery专区</li>
36 <li>搜索优化</li>
37 <li>站长交流</li>
38 </ul>
39 </li>
40 <li>
41 <a href="#">站长交流</a>
42 <ul>
43 <li>DIV+CSS专区</li>
44 <li>jQuery专区</li>
45 <li>搜索优化</li>
46 <li>站长交流</li>
47 </ul>
48 </li>
49 </ul>
50 </div>
51 </body>
52 </html>
style.css
1 * {
2 margin: 0px;
3 padding: 0px;
4 }
5 ul {
6 list-style: none;
7 margin: 0px auto;
8 font-size: 14px;
9 }
10 .nav li {
11 width: 150px;
12 height: 25px;
13 line-height: 25px;
14 text-align: center;
15 float: left;
16 background-color: #ccc;
17 position: relative;
18 //font-size: 14px;
19 }
20 .nav li a {
21 text-decoration: none;
22 color: #666;
23 }
24 .nav li ul {
25 position: absolute;
26 top: 25px;
27 display: none;
28 font-size: 12px;
29 }
index.js
1 $(function(){
2 $('.nav li').hover(function(){
3 $(this).find('ul').css('display', 'block');
4 }, function(){
5 $(this).find('ul').css('display', 'none');
6 });
7 });
追问
我要的是思路啊，你这个是从其他地方复制过来的吗？
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
