CSS如何实现基本的下拉菜单，代码如何写

来源：恒创科技编辑：恒创科技编辑部

2024-01-11 17:48:59

今天就跟大家聊聊有关“CSS如何实现基本的下拉菜单，代码如何写”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“CSS如何实现基本的下拉菜单，代码如何写”文章能对大家有帮助。

_{本篇文章主要介绍了纯CSS实现下拉菜单的示例代码，分享给大家，具体如下：
将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。
设置下拉菜单的高度添加过渡效果，高度为auto时过渡效果失效。

<style>
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li a{
display: block;
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: #2f3e45;
}
.drop-down{
width: 100px;
height: 50px;
}
.drop-down-content{
opacity: 0;
height: 0;
overflow: hidden;
transition: all 1s ease;
}

p{
font-size: 20px;
margin: 0;
}
.drop-down-content li:hover a{
background-color: red;
}
.nav .drop-down:hover .drop-down-content{
opacity: 1;
height: 150px;
}
</style>
<ul class="nav">
<li class="drop-down">
<a href="#">下拉菜单</a>
<ul class="drop-down-content">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
</ul>
</li>
</ul>
<p>内容</p>

效果图如下：

以上就是关于“CSS如何实现基本的下拉菜单，代码如何写”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。}