本文展示了如何使用HTML和CSS创建一个简单的下拉菜单。通过设置元素的display属性、利用:hover伪类以及相对和绝对定位，实现了下拉列表在鼠标悬停时显示和隐藏的效果。下拉菜单包含多个选项，当鼠标移到链接上时，文字会加下划线并变为红色。此技术适用于前端网页布局设计。
HTML+CSS实现简单下拉菜单
HTML+CSS实现简单的下拉列表
1.下拉列表实例
代码如下：
*{
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%;
}
效果图如下：
2.技术要点
下拉菜单需边的子菜单隐藏(使用display:none;将元素隐藏)
鼠标悬浮样式(div:hover)
父元素相对定位(position:relative;)
子元素绝对定位(position:absolute;)
持续更新，多多关注
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
