<button>按钮</button>
接下来，我们需要定义下拉菜单。我们可以使用 div 元素来创建下拉菜单，然后将其设置为 display:none，这样一开始它就不会显示出来。
<div ><a href="">选项一</a><a href="">选项二</a><a href="">选项三</a></div>
现在我们需要使用 CSS 来控制按钮点击事件。为了实现这个目的，我们需要使用 :hover 伪类来控制下拉菜单的显示和隐藏。具体代码如下：
button:hover+.dropdown-menu,.dropdown-menu:hover {display:block;}最后，我们需要使用一些样式来让菜单看起来更美观。下面是一个基本的 CSS 样式代码：
button {background-color: #4CAF50;color: white;padding: 14px 20px;border: none;cursor: pointer;}a {display: block;padding: 12px 16px;text-decoration: none;color: #333;}.dropdown-menu {position: absolute;top: 100%;left: 0;background-color: #f9f9f9;min-width: 160px;border: 1px solid #ccc;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}在这里，我们定义按钮的样式、下拉菜单以及菜单选项的样式。请注意，我们给 down-down-menu 设置了绝对定位，这样菜单就可以呈现在按钮下方。
好了，现在我们就成功地制作了一个简单的 CSS 按钮下拉菜单。你可以根据自己的需求对菜单进行进一步的样式定制，例如设置背景颜色、字体大小等等。
上一篇：javascript中不是数组方法
下一篇：css拟物按钮详解
