css下拉菜单小图标

下拉菜单是网页设计中常见的元素，可以为用户提供方便的导航和选择功能。在设计下拉菜单时，为了使用户更加直观地了解菜单选项，我们通常会在标题旁添加一个小图标，来表达所属的类别或含义。
在CSS中，我们可以使用伪元素来为下拉菜单添加小图标。代码如下：

/* 定义样式 */
.dropdown {
    position: relative;
}
<br>
.dropdown-title {
    padding-right: 20px;
    cursor: pointer;
}
<br>
.dropdown-title::after {
    content: ';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    background-image: url(icon.png);
    background-size: 100%;
}
<br>
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    display: none;
}
<br>
/* 鼠标悬停时显示下拉菜单 */
.dropdown:hover .dropdown-menu {
    display: block;
} 

在上面的代码中，`.dropdown-title` 是下拉菜单的标题，`.dropdown-menu` 是下拉菜单的选项。我们使用 `position: relative` 和 `position: absolute` 来实现标题和选项的相对定位，使用 `display: none` 和 `display: block` 实现菜单的隐藏和显示。
在 `.dropdown-title` 的伪元素 `::after` 中，我们使用 `content: '` 来添加空白的内容，通过 `display: inline-block` 将其转换为块级元素，然后使用 `width` 和 `height` 定义其大小，使用 `margin-left` 和 `background-image` 来设置图标的样式。
最后，我们使用 `background-size: 100%` 来保证图标在不同大小的标题中都能够显示完整。
使用上述样式，可以为下拉菜单添加小图标，提高用户体验，让用户更快地定位所需的选项，并且使得整个界面看起来更加美观。