css 点击弹出菜单 |eclipse css jsp

.menu {
position: relative;
display: inline-block;
}
.menu ul {
display: none;
position: absolute;
z-index: 1;
}
.menu:hover ul {
display: block;
}

上面的代码定义了一个名为 .menu 的选择器，其中 ul 标签默认是隐藏的（display: none），当用户把鼠标悬浮在 .menu 上时，ul 标签就会显示出来。

当然，如果你想通过点击按钮来弹出菜单，也可以用下面的代码：

.menu {
position: relative;
display: inline-block;
}
.menu ul {
display: none;
position: absolute;
z-index: 1;
}
.menu.active ul {
display: block;
}

在这个例子中，大家为 .menu 标签添加了一个 .active 类，只有当这个类被添加时，ul 标签才会显示出来。大家只要使用 JavaScript 给按钮添加一个点击事件，就可以在点击时添加或移除 .active 类。

CSS 点击弹出菜单的实现方法比较简单，但是使用得当的话可以大大提高用户体验，让网页看起来更加流畅自然。希望本文对你有所帮助。