下拉选单 - 样式

只要涉及到添加样式，就要设置class。

设置class一开始看起来繁琐，但是随着项目的深入，以及网站的扩大，你会了解到设置class的重要意义：方便网站的管理与更新。

设置样式前的检查清单

当想要调整某个盒子的CSS样式的时候，永远先做下面这个检查步骤：

1. 选中目标盒子
2. 切换到「Styles 样式菜单」
3. 查看目标盒子是否设置了class名字
4. 如果没有，立刻添加

添加class

下一步我们会开始编辑「Dropdown toggle 下拉选单开关」的样式。

按照上面的检查清单，会发现我们需要给「Dropdown toggle 下拉选单开关」盒子添加一个class名字。点击 添加class。输入class名称完毕后，按下键盘上的回车键确认。

添加class，名称「my dropdown」。

下拉选单的状态

下拉选单有两个状态：

1. 「Normal 正常」状态
2. 「Open 打开」状态

不同的状态下，CSS样式可以单独设置。

控制这个状态的，就是「Open Menu 打开菜单」 按钮。

默认的时候，下拉选单会处于「Normal 正常」状态。

判断「Normal 正常」状态有2个特征：

1. 下拉菜单收起，无法看到
2. 「Open Menu 打开菜单」按钮是灰色，没有按下

点击「Open Menu 打开菜单」按钮就会切换到「Open 打开」状态。

如果切换到「Open 打开」状态，会出现3个变化：

1. 这时候下拉菜单会展开
2. 「Open Menu 打开菜单」按钮是深灰色，看起来像是处于被按下的状态
3. 「Styles 样式」面板中，出现名为「Open」的绿色class

在「Normal 正常」和「Open 打开」状态下，分别可以设置对应的鼠标「Hover 划过」样式。

因此，需要设置的「Dropdown toggle 下拉选单开关」盒子的样式，一般会有4种。

用一个2乘2的表格展示：

下一节，我们就会编辑这4个样式，内容会较多。