---
title: How to Create a Dropdown Menu with CSS and JavaScript
localeTitle: 如何使用CSS和JavaScript创建下拉菜单
---
## 如何使用CSS和JavaScript创建下拉菜单
在本教程中，您将学习如何使用vanilla Javascript，HTML和CSS创建一个简单的下拉菜单。我们将介绍HTML，CSS和Javascript代码，但更多地关注编程，因为这是一个JS教程。我们将只使用普通的JS和CSS，没有框架或预处理器。唯一（种类）异常将导入[Font Awesome](https://fontawesome.com/) CSS文件，因为我们将使用其中一个图标。
这是针对平均了解HTML，CSS和JS的开发人员。我试图让它尽可能干净，但我不会过分关注细节。我希望你们都喜欢。
## 截图
这是代码结果的样子：
初始屏幕：
下拉开启：
下拉选项已选中：
#### HTML：
在本节中，我们将讨论演示页面的HTML代码的实现。 首先，让我们看一下``代码
```html
Dropdown Example
```
这基本上是HTML头文件样板，除了加载我们将在本教程中使用的两个CSS样式表的`link`标记：Font Awesome样式和`styles.css`文件，我们将在其中定义此页面的样式。
然后，还有HTML文件的其余部分，正文：
```html
The result is:
```
本节可分为3个主要部分：
* `.dropdown` div，将定义下拉元素的结构。
* `#result`元素，将包含用户选择的选项，来自下拉列表元素。
* 写入`