CSS實現下拉菜單的幾種方法
阿新 • • 發佈：2018-01-27
ansi display ora ble 下拉 技術 body round too 
PS:轉自https://www.cnblogs.com/yewenxiang/p/6064117.html
第一種:display:none和display:block切換
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 ul{
8 list-style: none;
9 }
10 .nav>li{
11 float: left;
12 }
13 ul a{
14 display: block;
15 text-decoration: none;
16 width: 100px;
17 height: 50px;
18 text-align: center;
19 line-height: 50px;
20 color: white;
21 background-color: #2f3e45;
22 }
23 .nav>li:first-child a{
24 border-radius: 10px 0 0 10px;
25 }
26 .nav>li:last-child a{
27 border-radius: 0 10px 10px 0;
28 }
29 .drop-down{
30 /*position: relative;*/
31 }
32 .drop-down-content{
33 padding: 0;
34 display: none;
35 /*position: absolute;*/
36 }
37
38 h3{
39 font-size: 30px;
40 clear: both;
41 }
42 .drop-down-content li:hover a{
43 background-color:red;
44 }
45 .nav .drop-down:hover .drop-down-content{
46 display: block;
47 }
48 </style>
49 </head>
50 <body>
51 <ul class="nav">
52 <li><a href="#">下拉菜單</a></li>
53 <li class="drop-down"><a href="#">下拉菜單</a>
54 <ul class="drop-down-content">
55 <li><a href="#">我是1</a></li>
56 <li><a href="#">我是2</a></li>
57 <li><a href="#">我是3</a></li>
58 </ul>
59 </li>
60 <li><a href="#">下拉菜單</a></li>
61 <li><a href="#">下拉菜單</a></li>
62 <li><a href="#">下拉菜單</a></li>
63 </ul>
64 <h3>我是測試文字</h3>
65 </body>
66 </html>
第一種實現方式中，你在 ul a 中添加一條 {z-index：1}就可以解決測試文字下移的問題。
這是首先考慮到的實現方法，給 .drop-down-content 添加display:none，當懸浮在.drop-down上時 .drop-down-content的display變成block，缺點是不能添加過渡屬性，慢慢彈出下來菜單。當.drop-down-content顯示時會把後面的盒子往下擠，因為.drop-down-content 顯示時是存在於文檔流中的，給.drop-down設置position:relative，.drop-down-content設置position:absolute，使下拉菜單脫離了文檔流來解決，上面註釋的地方改過來即可
第二種方法:給懸浮的這個li設置一個固定高度，然後設置超出部分隱藏，懸浮時顯示。
1 <style>
2 ul{
3 list-style: none;
4 }
5 .nav>li{
6 float: left;
7 }
8 ul a{
9 display: block;
10 text-decoration: none;
11 width: 100px;
12 height: 50px;
13 text-align: center;
14 line-height: 50px;
15 color: white;
16 background-color: #2f3e45;
17 }
18 .nav>li:first-child a{
19 border-radius: 10px 0 0 10px;
20 }
21 .nav>li:last-child a{
22 border-radius: 0 10px 10px 0;
23 }
24 .drop-down{
25 /*position: relative;*/
26 height: 50px;
27 overflow: hidden;
28 }
29 .drop-down-content{
30 padding: 0;
31 /*position: absolute;*/
32 }
33
34 h3{
35 font-size: 30px;
36 clear: both;
37 /* position: relative;
38 z-index: -1;*/
39 }
40 .drop-down-content li:hover a{
41 background-color:red;
42 }
43 .nav .drop-down:hover{
44 overflow: visible;
45 }
46 </style>
有個問題：h3段落裏面的文字會從下拉菜單中透過來，並且鼠標放在字上面的時候下拉菜單會縮回。
解決方式有兩種：1.給.drop-down設置position:relative，.drop-down-content設置position:absolute。
2.給h3設置position:relative;z-index:-1。
第三種方法：給下拉菜單設置固定的高度，下拉菜單的內容設置透明opacity: 0;，懸浮在下拉菜單時opacity: 1;來實現
1 <style>
2 ul{
3 list-style: none;
4 }
5 .nav>li{
6 float: left;
7 }
8 ul a{
9 display: block;
10 text-decoration: none;
11 width: 100px;
12 height: 50px;
13 text-align: center;
14 line-height: 50px;
15 color: white;
16 background-color: #2f3e45;
17 }
18 .nav>li:first-child a{
19 border-radius: 10px 0 0 10px;
20 }
21 .nav>li:last-child a{
22 border-radius: 0 10px 10px 0;
23 }
24 .drop-down{
25 /*position: relative;*/
26 height: 50px;
27 }
28 .drop-down-content{
29 padding: 0;
30 opacity: 0;
31 /*position: absolute;*/
32 }
33
34 h3{
35 font-size: 30px;
36 clear: both;
37 /* position: relative;
38 z-index: -1;*/
39 }
40 .drop-down-content li:hover a{
41 background-color:red;
42 }
43 .nav .drop-down:hover .drop-down-content{
44 opacity: 1;
45 }
46 </style>
效果同上。
上面的幾種方法都是不能添加過渡效果的，鼠標滑過時下拉菜單就馬上彈出來了，用戶體驗不是很好，下面這種方法可以添加過渡的效果來實現一定時間內來彈出
方法四：將下拉菜單的ul高度設置為0，並且超出部分隱藏掉。
1 <style>
2 ul{
3 list-style: none;
4 }
5 .nav>li{
6 float: left;
7 }
8 ul a{
9 display: block;
10 text-decoration: none;
11 width: 100px;
12 height: 50px;
13 text-align: center;
14 line-height: 50px;
15 color: white;
16 background-color: #2f3e45;
17 }
18 .nav>li:first-child a{
19 border-radius: 10px 0 0 10px;
20 }
21 .nav>li:last-child a{
22 border-radius: 0 10px 10px 0;
23 }
24 .drop-down{
25 /*position: relative;*/
26 height: 50px;
27 }
28 .drop-down-content{
29 padding: 0;
30 opacity: 0.3;
31 height: 0;
32 overflow: hidden;
33 transition: all 1s ease;
34 /*position: absolute;*/
35 }
36
37 h3{
38 font-size: 30px;
39 clear: both;
40 /* position: relative;
41 z-index: -1;*/
42 }
43 .drop-down-content li:hover a{
44 background-color:red;
45 }
46 .nav .drop-down:hover .drop-down-content{
47 opacity: 1;
48 height: 150px;
49 }
也會出現上面同樣的問題，兩種解決方式，把上面代碼中註釋的地方改過來即可。
做這個demo時我碰到誤區，以為把下拉菜單ul值設置為0，下拉菜單整體會隱藏掉，實際上是ul的高度變為了0，但是裏面的內容並沒有變化，覺得跟做導航時浮動li，ul的高度變成了0，li還能顯示一樣。一定要給ul設置overflow:hidden，整個下拉菜單才會隱藏。順帶提一句：我們做導航條的時候一般都是左浮動li標簽，ul的高度就變成了0，然後給ul設置overflow:hidden，ul就會有高度了，包裹了li標簽，後面的盒子會正常布局。
方法五：設置包裹下拉菜單的li元素position:relation;下拉菜單絕對定位，left：-999px;使下拉菜單跑到左邊瀏覽器外面看不到的地方，懸浮時，left:0;使其出現在瀏覽器中顯示。
1 <style>
2 ul{
3 list-style: none;
4 }
5 .nav>li{
6 float: left;
7 }
8 ul a{
9 display: block;
10 text-decoration: none;
11 width: 100px;
12 height: 50px;
13 text-align: center;
14 line-height: 50px;
15 color: white;
16 background-color: #2f3e45;
17 }
18 .nav>li:first-child a{
19 border-radius: 10px 0 0 10px;
20 }
21 .nav>li:last-child a{
22 border-radius: 0 10px 10px 0;
23 }
24 .drop-down{
25 position: relative;
26 }
27 .drop-down-content{
28 padding: 0;
29 position: absolute;
30 left: -999px;
31 }
32 h3{
33 font-size: 30px;
34 clear: both;
35 }
36 .drop-down-content li:hover a{
37 background-color:red;
38 }
39 .nav .drop-down:hover .drop-down-content{
40 left: 0;
41 }
42 </style>
CSS實現下拉菜單的幾種方法