学堂学堂学堂公众号手机端

下面是一个简单的原生JavaScript实现下拉菜单的示例代码： <!DOCTYPEhtml> <html> <

lewis 1年前 (2024-04-09) 阅读数 10 #技术

下面是一个简单的原生JavaScript实现下拉菜单的示例代码：

<!DOCTYPEhtml>
<html>
<head>
<style>
.dropdown{
position:relative;
display:inline-block;
}

.dropdown-content{
display:none;
position:absolute;
background-color:#f9f9f9;
min-width:160px;
box-shadow:0px8px16px0pxrgba(0,0,0,0.2);
z-index:1;
}

.dropdown:hover.dropdown-content{
display:block;
}
</style>
</head>
<body>

<divclass="dropdown">
<button>下拉菜单</button>
<divclass="dropdown-content">
<ahref="#">选项1</a>
<ahref="#">选项2</a>
<ahref="#">选项3</a>
</div>
</div>

</body>
</html>

在上面的代码中，我们使用了<div>元素和<button>元素来创建一个下拉菜单。通过CSS设置了下拉菜单的样式，并使用JavaScript监听鼠标悬停事件来显示和隐藏下拉内容。当鼠标悬停在下拉菜单上时，下拉内容就会显示出来。

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：html - 【随笔】移动端input type｜语义与IOS按键下一篇：微信小程序是如何实现手写板的，代码是什么