首页 > 代码库 > 用纯css实现下拉菜单的几种方式

用纯css实现下拉菜单的几种方式

2024-08-20 23:43:22   221人阅读

第一种: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>

技术分享

这是首先考虑到的实现方法，给 .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>

技术分享

 

后来又意淫了一种方法，把下拉菜单的背景色和字体色改为透明色，然后后悬浮在li上时，颜色变回来。然而发现并没有什么卵用，虽然眼睛看不到，但是鼠标已过去时变成了小手，就暴露啦，哈哈。

 

用纯css实现下拉菜单的几种方式


联系
我们