css 实现动态二级菜单

动态实现简单的二级菜单

css 实现动态二级菜单_第1张图片

 

 

 当鼠标放到一级标签上时,鼠标会变成小手的形状 展示二级菜单,源码如下,复制即可直接使用

 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>Documenttitle>
 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>

如果读者有不明白的地方,或建议可直接留言,定会一一解答。

你可能感兴趣的:(css 实现动态二级菜单)