纯CSS实现下拉菜单的示例代码
发布时间：2018-01-09 16:20:34 作者：kuang 
我要评论
我要评论这篇文章主要介绍了纯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>
效果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
基于css3制作圆形下拉框，点击滑动展开收缩城市菜单，支持多选/勾选城市效果。这是一款实用的下拉菜单选择代码。非常不错，感兴趣的朋友前来下载使用2019-05-28
这篇文章主要介绍了CSS中的导航栏和下拉菜单的实现的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-18
这篇文章主要介绍了HTML+CSS实现下拉菜单的实现的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-18- 下拉菜单在很多网页中都能应用到，这篇文章主要介绍了纯CSS实现的大型下拉菜单的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编2018-05-03
纯css3制作鼠标悬停波浪形状弹性下拉菜单特效源码，当鼠标悬停波浪形菜单栏，弹出列表信息，鼠标离开自动收缩。效果非常逼真，本段代码可以在各个网页使用，有需要的朋友可2017-12-18
这是一个使用HTML和纯CSS代码来制作的大型下拉菜单效果。适合用于栏目分类较多的网站使用，欢迎下载2017-10-26- 使用Html+css实现简单的下拉菜单代码非常简单，具有参考借鉴价值，需要的的朋友参考下吧2017-06-22
这篇文章主要介绍了利用纯css做一个下拉菜单功能的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-01
最新评论