react 下拉菜单

最新推荐文章于 2024-09-22 13:42:19 发布

mbshqqb

最新推荐文章于 2024-09-22 13:42:19 发布

阅读量287

点赞数 2

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/mbshqqb/article/details/136412232

版权

本文详细描述了如何使用HTML和CSS创建一个响应式的下拉菜单，包括按钮样式、下拉菜单的隐藏和显示逻辑，以及利用相对和绝对定位实现菜单的动态行为。

摘要由CSDN通过智能技术生成

html

<div class="menu">
	<button>点击我</button>
	<ul class="menu-items">
		<li><a href="#">链接1</a></li>
		<li><a href="#">链接2</a></li>
		<li><a href="#">链接3</a></li>
	</ul>
</div>

css:


.menu {
    position: relative; /* 设置相对定位 */
}
 
.menu button {
    background-color: #4CAF50;
    color: white;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
}
 
.menu .menu-items {
    display: none; /* 默认不显示下拉菜单 */
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute; /* 将下拉菜单的位置设为绝对定位 */
    top: 100%; /* 让下拉菜单在按钮上面显示 */
    left: 0;
    width: max-content; /* 根据内容自动调整宽度 */
    z-index: 9999; /* 确保下拉菜单处于最前面 */
}
 
.menu .menu-items li a {
    display: block;
    text-decoration: none;
    padding: 8px 16px;
    color: black;
}
 
/* 当鼠标悬停在按钮上时显示下拉菜单 */
.menu:hover .menu-items {
    display: block;
}