用html javascript css写一个漂亮的下拉菜单

创建一个漂亮的下拉菜单通常涉及到HTML结构、CSS样式和JavaScript交互。下面是一个简单的例子：

**HTML结构：**

<div class="dropdown">
  <button class="dropbtn">选择选项</button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <a href="#">选项3</a>
  </div>
</div>

**CSS样式（纯CSS实现无JS）：**

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

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

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1;}
.show {display:block;}

**JavaScript（可选，添加鼠标悬停事件）：**

document.getElementById("myDropdown").addEventListener("mouseover", function() {
  this.style.display = "block";
});

document.getElementById("myDropdown").addEventListener("mouseout", function() {
  this.style.display = "none";
});

在这个例子中，当用户点击“选择选项”按钮时，下拉菜单会显示出来；当鼠标离开下拉菜单时，它又会被隐藏起来。