请详细解释下拉菜单widget的工作原理和使用方法，要求输出包含HTML、CSS和JavaScript代码，且JavaScript代码必须使用箭头函数。
user
下拉菜单（Dropdown Menu）是一种常见的用户界面组件，通常用于提供用户可选择的选项列表。下面将详细解释下拉菜单的工作原理和使用方法，并提供包含HTML、CSS和JavaScript代码的实现示例，其中JavaScript代码使用了箭头函数。

### 工作原理
下拉菜单的工作原理是：
1. **HTML结构**：定义下拉菜单的结构，包括一个按钮（或触发元素）和一个包含选项的列表。
2. **CSS样式**：通过CSS控制下拉菜单的外观和行为，包括隐藏和显示选项列表。
3. **JavaScript交互**：使用JavaScript处理用户的交互事件（如点击按钮），动态显示或隐藏选项列表。

### 使用方法
使用下拉菜单的基本步骤如下：
1. 在HTML中定义下拉菜单的结构。
2. 使用CSS样式化下拉菜单，设置默认状态下的选项列表为隐藏。
3. 使用JavaScript处理用户的点击事件，切换显示或隐藏选项列表。

### 代码示例

#### HTML
```html
<div class="dropdown">
  <button class="dropdown-button">选择一个选项</button>
  <ul class="dropdown-menu">
    <li><a href="#">选项 1</a></li>
    <li><a href="#">选项 2</a></li>
    <li><a href="#">选项 3</a></li>
  </ul>
</div>
```

#### CSS
```css
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

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

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

.dropdown-menu a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-menu {
  display: block;
}
```

#### JavaScript
```javascript
const dropdownButton = document.querySelector('.dropdown-button');
const dropdownMenu = document.querySelector('.dropdown-menu');

dropdownButton.addEventListener('click', () => {
  dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
});
```

### 解释
- **HTML部分**：定义了一个包含按钮和选项列表的下拉菜单结构。
- **CSS部分**：设置了下拉菜单的样式，包括按钮和选项列表的外观，以及默认隐藏选项列表。
- **JavaScript部分**：使用箭头函数处理按钮的点击事件，动态切换选项列表的显示和隐藏状态。

通过这种方式，您可以创建一个功能齐全且样式美观的下拉菜单。
assistant