在下拉选项末尾添加小三角来标记下拉选项有下拉列表
在实现下拉菜单时候，会遇到并不是所有的选项都有下拉列表的情况，通常的设计是在有下拉列表的选项后面添加一个向下的小三角。
更进一步的是在下拉列表展开时，小三角指向上方；下拉列表隐藏时，小三角又恢复为指向下方；而且变化过程以动画形式实现。
下面就来一步一步地实现动画小三角。
首先来做一个小三角。
通过设置border属性实现小三角
当我们为一个元素的border的每一边设置不同的颜色，我们就能观察到元素的每一边的边框实际上是梯形。那我们把元素的width属性和height属性都设置为0时，我们就得到了三角形。
还是来看示例吧。
See the Pen 使用边框实现三角 by xingzhi (@xingzhi) on CodePen.
做好了小三角，下面我们来把它添加到有下拉列表的下拉选项中。
通过after伪元素添加小三角
要把小三角添加到下拉选项后面并不需要添加一个新的元素，利用after伪元素就可以了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.dropdown {
&:after {
content: '';
border: 5px solid transparent;
border-top-color: black;
position: absolute;
top: 50%;
right: 0;
transition: transform 0.5s;
transform-origin: 50% 25%;
transform: translate(0, -25%);
}
&:hover {
&:after {
transform: translate(0, -25%) rotate(-180deg);
}
}
}
这里需要注意的是，因为transform属性默认的变换参考点是元素的中心，而我们的小三角只是元素的四分之一，所以要使两种状态下的小三角位置不变，需要设置transform-origin: 50% 25%；要使小三角垂直方向居中，需要设置transform: translate(0, -25%)。
把小三角添加到下拉选项后面之后，下一步就是当下拉列表展开或者隐藏时，小三角以动画的形式实现切换。
动起来
我们已经为小三角定义了两种状态：下拉列表隐藏时小三角向下，表示有下拉列表；下拉列表显示时小三角向上，表示下拉列表能够隐藏。
要两个状态的切换以动画的形式实现，只需要把transform属性添加给transition属性。改动很小，这里就不再贴代码了，直接在完整示例中看吧。
完整示例
下面是完整的示例。