动态实现简单的二级菜单
当鼠标放到一级标签上时，鼠标会变成小手的形状 展示二级菜单，源码如下，复制即可直接使用
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 * {margin: 0; padding: 0;}
9 ul { list-style: none;}
10 div {
11 width: 100%;
12 height: 50px;
13 background-color: #ccc;
14 }
15 .first {
16 width: 100px;
17 height: 50px;
18 float: left;
19 margin-right: 70px;
20 /* background-color: pink; */
21 cursor: pointer;
22 text-align: center;
23 line-height: 50px;
24 border-radius: 15px;
25 }
26 .second li{
27 width: 80px;
28 height: 50px;
29 background-color: blue;
30 border-radius: 50%;
31 margin-top: 10px;
32 }
33 .second {
34 display: none;
35 }
36 .first:hover .second{
37 display: block;
38 cursor: pointer;
39 }
40 .first:hover {
41 background-color: pink;
42 }
43 </style>
44
45 <body>
46 <div>
47 <ul>
48 <li class="first">
49 <p>一级标签</p>
50 <ul class="second">
51 <li>二级标签</li>
52 <li>二级标签</li>
53 </ul>
54 </li>
55
56 <li class="first">
57 <p>一级标签</p>
58 <ul class="second">
59 <li>二级标签</li>
60 <li>二级标签</li>
61 </ul>
62 </li>
63 </ul>
64 </div>
65
66 </body>
67 </html>如果读者有不明白的地方，或建议可直接留言，定会一一解答。
来源：oschina
链接：https://my.oschina.net/u/4411210/blog/4329546