HTML+CSS实现下拉菜单的实现
发布时间：2018-07-18 15:03:23 作者：酷酷的波 
我要评论
我要评论这篇文章主要介绍了HTML+CSS实现下拉菜单的实现的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
1.下拉列表实例
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
*{
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}
body{
text-align:center;
}
.header{
display:inline-block;
position:relative;
background-color:#4CAF50;
}
.header:hover .downbtn{
display:block;
background-color: #f1f1f1;
}
.header:hover{
background-color: #3e8e41;
}
.header span{
padding:15px;
line-height:61px;
cursor:pointer;
color: white;
}
.header .downbtn{
display:none;
position:absolute;
background-color:#f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
min-width: 160px;
}
.header .downbtn li{
line-height:30px;
text-align:left;
padding-left:5px;
}
.header .downbtn a:hover{
text-decoration:underline;
color:#f00;
}
.header .downbtn a{
display:block;
color:black;
width:100%;
}
</style>
</head>
<body>
<div class="header">
<span>下拉列表</span>
<div class="downbtn">
<ul>
<li><a href="#">下拉列表01</a></li>
<li><a href="#">下拉列表02</a></li>
<li><a href="#">下拉列表03</a></li>
<li><a href="#">下拉列表04</a></li>
<li><a href="#">下拉列表05</a></li>
</ul>
</div>
</div>
</body>
</html>
效果图如下：
2.技术要点
- 下拉菜单需边的子菜单隐藏（使用display:none;将元素隐藏）
- 鼠标悬浮样式（div:hover）
- 父元素相对定位（position:relative;）
- 子元素绝对定位（position:absolute;）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
基于css3制作圆形下拉框，点击滑动展开收缩城市菜单，支持多选/勾选城市效果。这是一款实用的下拉菜单选择代码。非常不错，感兴趣的朋友前来下载使用2019-05-28
这篇文章主要介绍了CSS中的导航栏和下拉菜单的实现的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-18- 下拉菜单在很多网页中都能应用到，这篇文章主要介绍了纯CSS实现的大型下拉菜单的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编2018-05-03
这篇文章主要介绍了纯CSS实现下拉菜单的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-09
纯css3制作鼠标悬停波浪形状弹性下拉菜单特效源码，当鼠标悬停波浪形菜单栏，弹出列表信息，鼠标离开自动收缩。效果非常逼真，本段代码可以在各个网页使用，有需要的朋友可2017-12-18
这是一个使用HTML和纯CSS代码来制作的大型下拉菜单效果。适合用于栏目分类较多的网站使用，欢迎下载2017-10-26- 使用Html+css实现简单的下拉菜单代码非常简单，具有参考借鉴价值，需要的的朋友参考下吧2017-06-22
这篇文章主要介绍了利用纯css做一个下拉菜单功能的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-01
最新评论