该篇文章介绍了如何使用HTML、CSS和JavaScript来创建一个按钮，当鼠标悬停时显示二级菜单。通过CSS实现基本的样式和布局，JavaScript则用于添加点击事件并控制子菜单的显示和隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮划过二级菜单</title>
<link rel="stylesheet" href="./css/按钮二级菜单.css">
<!-- 链接css文件 -->
</head>
<body>
<div class="button-container">
<button class="main-button">你要干什么</button>
<div class="sub" id="sub">
<a href="https://ys.mihoyo.com/cloud/#/">吃饭</a>
<a href="https://ys.mihoyo.com/cloud/#/">睡觉</a>
<a href="https://ys.mihoyo.com/cloud/#/">打豆豆</a>
<!-- 如果要点这个链接，在新页面打开网页，那就在a标签后加属性target="_blank" -->
<!-- 如果希望改子菜单样式，那我们可以使用ul li无序列表(自带样式)/自定义列表（不自带样式），再用css来装饰 -->
</div>
</div>
<script src="./js/按钮二级菜单.js"></script>
<!-- 链接js文件 -->
</body>
</html>HTML
.button-container{
position: relative;
display: inline-block;
}
.main-button{
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
/* 主按钮样式 */
.sub{
position: absolute;
top: 100%;
left: 0;
background-color: #7c7979;
padding: 10px;
/* 子按钮栏样式 */
display: none;
/* display: block; */
/* 隐藏子按钮栏 */
}
.sub a{
display: block;
padding: 5px 10px;
color:#fff ;
text-decoration: none;
/* 让链接文本栏消失 */
/* 子按钮样式 */
}
.main-button:hover + .sub{
display: block;
}
/* css原生方式，光标划过，显示子按钮栏 */
.sub.show {
display: block;
}
/* js实现点击打开菜单 */css
document.querySelector('.main-button').addEventListener('click', function() {
this.nextElementSibling.classList.toggle('show');
});js
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
