js下拉菜单怎么制作

lewis 6年前 (2019-03-19) 阅读数 11 #程序编程

文章标签 js js下拉菜单

要制作一个下拉菜单，可以使用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">
"#">选项1</a>
"#">选项2</a>
"#">选项3</a>
</div>
</div>
</body>
</html>

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

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