类似新浪微博的下拉菜单的前端代码

下面是一个简单的示例，使用 HTML、CSS 和 JavaScript 实现下拉菜单：

HTML 代码：

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">菜单项1</a>
    <a href="#">菜单项2</a>
    <a href="#">菜单项3</a>
  </div>
</div>

CSS 代码：

/* 下拉菜单按钮样式 */
.dropbtn {
  background-color: #4CAF50; /* 按钮背景色 */
  color: white; /* 按钮文字颜色 */
  padding: 16px; /* 按钮内边距 */
  font-size: 16px; /* 按钮文字大小 */
  border: none; /* 去除按钮边框 */
  cursor: pointer; /* 鼠标悬停指针 */
}

/* 下拉菜单容器样式 */
.dropdown {
  position: relative; /* 相对定位 */
}

/* 下拉菜单内容样式 */
.dropdown-content {
  display: none; /* 初始隐藏 */
  position: absolute; /* 绝对定位 */
  z-index: 1; /* 显示在其他元素上面 */
}

/* 下拉菜单内容链接样式 */
.dropdown-content a {
  color: black; /* 链接文字颜色 */
  padding: 12px 16px; /* 链接内边距 */
  text-decoration: none; /* 去除下划线 */
  display: block; /* 块级元素 */
}

/* 鼠标悬停下拉菜单容器样式 */
.dropdown:hover .dropdown-content {
  display: block; /* 显示下拉菜单内容 */
}

JavaScript 代码：

（无需 JavaScript 代码，因为下拉菜单是通过 CSS 的 `:hover` 实现的）