css下拉菜单小三角

CSS下拉菜单中的小三角可以通过CSS样式来实现。下面我们来看一下这个小三角该如何实现：

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown::after {
  content: "";
  border: solid transparent;
  border-width: 0 5px 5px 5px;
  border-bottom-color: #fff;
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
} 

首先，我们需要在下拉菜单容器中设置 position: relative;，接着在下拉菜单内容的样式中设置 position: absolute;，这样可以让下拉菜单内容定位到下拉菜单容器的底部。

然后，我们可以通过鼠标悬停在下拉菜单容器上时显示下拉菜单内容的样式来设置 display: block;。

最后，我们可以通过 ::after 伪元素来实现小三角样式。设置 content: ""; 可以让该伪元素变为一个正常的盒子，然后通过设置 border 来实现三角形的样式，同时通过设置 position: absolute; 来让该伪元素定位到下拉菜单容器的顶部，通过设置 top: -5px; 和 margin-left: -5px; 来让该伪元素水平居中。

通过以上样式代码的设置，我们就可以实现一个带有小三角的CSS下拉菜单了。