一、漸變式改變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>