Html5+Css3制作下拉菜单的三种方式
一、渐变式改变ol的高度
1.外部为ul标签，在每个li里嵌套一个ol列表
2.设置外部li左浮动，内部ol标签绝对定位，外部li标签相对定位
3.设置ol的高为0，溢出隐藏
4.外部li标签:hover 时，设置ol的高度，transition渐变
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 /*一、下拉菜单ol折叠*/
8 *{margin: 0;padding: 0px}
9 ul{
10 width: 200px;
11 height: 50px;
12 outline: 1px solid black;
13 }
14 ul li{
15 width: 50%;
16 height: 100%;
17 outline: 1px solid black;
18 text-align: center;
19 float: left;
20 line-height: 50px;
21 list-style: none;
22 background: green;
23 }
24 ul ol{
25 width: 100%;
26 height: 0;
27 transition: all linear 0.5s;
28 overflow: hidden;
29 outline: 1px solid black;
30 }
31 ul ol li{
32 width: 100%;
33 height: 50px;
34 text-align: left;
35 background: pink;
36 outline: 1px solid black;
37 }
38 ul ol li a{
39 color: black;
40 text-decoration: none;
41 }
42 ul li:hover ol{
43 height: 150px;
44 transition: all linear 1s;
45 }
46 ul ol li:hover{
47 background: yellow;
48 }
49
50 </style>
51 </head>
52 <body>
53 <ul>
54 <li>帅哥
55 <ol>
56 <li><a href="#">罗晋</a></li>
57 <li><a href="#">刘志鹏</a></li>
58 <li><a href="#">周乐</a></li>
59 </ol>
60 </li>
61 <li>美女
62 <ol>
63 <li><a href="#">刘涛</a></li>
64 <li><a href="#">范冰冰</a></li>
65 <li><a href="#">刘诗诗</a></li>
66 </ol>
67 </li>
68 </ul>
69 </body>
70 </html>
二、渐变式改变ol 下li标签的高度，同第一种方法，设置li标签的高度为0，hover的时候设置一个高度
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 /*二、下拉菜单li折叠*/
8 *{margin: 0;padding: 0px}
9 ul{
10 width: 200px;
11 height: 50px;
12 outline: 1px solid black;
13 }
14 ul li{
15 width: 50%;
16 height: 100%;
17 outline: 1px solid black;
18 text-align: center;
19 float: left;
20 line-height: 50px;
21 list-style: none;
22 background: green;
23 }
24 ul ol li{
25 width: 100%;
26 /*变化*/
27 height: 0;
28 text-align: left;
29 background: pink;
30 outline: 1px solid black;
31 transition: all linear 1s;
32 overflow:hidden;
33 }
34 ul ol li a{
35 color: black;
36 text-decoration: none;
37 }
38 ul li:hover ol li{
39 height: 50px; /*变化*/
40 transition: all linear 1s;
41 }
42 ul ol li:hover{
43 background: yellow;
44 }
45 </style>
46 </head>
47 <body>
48 <ul>
49 <li>帅哥
50 <ol>
51 <li><a href="#">罗晋</a></li>
52 <li><a href="#">刘志鹏</a></li>
53 <li><a href="#">周乐</a></li>
54 </ol>
55 </li>
56 <li>美女
57 <ol>
58 <li><a href="#">刘涛</a></li>
59 <li><a href="#">范冰冰</a></li>
60 <li><a href="#">刘诗诗</a></li>
61 </ol>
62 </li>
63 </ul>
64 </body>
65 </html>
三、挂面式下拉菜单 用display隐藏，设置block显示二级菜单
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 /*三、挂面式二级菜单*/
8 *{margin: 0;padding: 0px}
9 ul{
10 width: 200px;
11 height: 50px;
12 outline: 1px solid black;
13 }
14 ul li{
15 width: 50%;
16 height: 100%;
17 outline: 1px solid black;
18 text-align: center;
19 float: left;
20 line-height: 50px;
21 list-style: none;
22 background: green;
23 }
24 ul ol{
25 width: 100%;
26 height: 150px;
27 overflow: hidden;
28 outline: 1px solid black;
29 display: none;
30 }
31 ul ol li{
32 width: 100%;
33 height: 50px;
34 text-align: left;
35 background: pink;
36 outline: 1px solid black;
37 }
38 ul ol li a{
39 color: black;
40 text-decoration: none;
41 }
42 ul li:hover ol{
43 display: block;
44 }
45 ul ol li:hover{
46 background: yellow;
47 }
48
49
50 </style>
51 </head>
52 <body>
53 <ul>
54 <li>帅哥
55 <ol>
56 <li><a href="#">罗晋</a></li>
57 <li><a href="#">刘志鹏</a></li>
58 <li><a href="#">周乐</a></li>
59 </ol>
60 </li>
61 <li>美女
62 <ol>
63 <li><a href="#">刘涛</a></li>
64 <li><a href="#">范冰冰</a></li>
65 <li><a href="#">刘诗诗</a></li>
66 </ol>
67 </li>
68 </ul>
69 </body>
70 </html>
