js下拉菜单怎么制作

2320
2023/7/20 21:38:46
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

要制作一个下拉菜单,可以使用JavaScript和HTML来实现。以下是一个简单的示例:

HTML代码:

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单示例</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 100px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button>选择</button>
<div class="dropdown-content">
<a href="#">选项1</a>
<a href="#">选项2</a>
<a href="#">选项3</a>
</div>
</div>
</body>
</html>

在上面的示例中,我们创建了一个div元素,并将其样式设置为position: relative,然后在其中添加了一个按钮和一个下拉菜单内容的div。下拉菜单的样式设置为display: none,这样一开始就会隐藏起来。当鼠标悬停在div上时,我们将下拉菜单的样式设置为display: block,从而显示它。

你可以根据需要修改样式和菜单内容。这只是一个基本示例,你可以根据自己的需求进行扩展和修改。

辰迅云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读: js中onbeforepaste事件怎么使用