纯CSS实现下拉菜单的示例代码
建站知识 2021-07-03 08:16www.168986.cn长沙网站建设
本篇文章主要介绍了纯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>
效果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。