Html 带三角形的单色下拉菜单？

我是新手

我正在尝试创建顶部带有三角形的下拉菜单。我希望每个下拉菜单都是不同的颜色，但我一辈子都想不出如何改变每个三角形。。。我到处找，运气不好。如果有人能帮忙，我会非常感激的！这是我用来做三角形的

nav ul li ul:after {
position: absolute;
left: 50%;
margin-left: -10px;
top: -10px;
width: 0;
height: 0;
content:'';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff; }

此外，正如我所说，我在这方面是相当新的，所以如果我的代码有什么不对劲的地方，我可以改进，请让我知道。。。谢谢！：）

---

您只需在CSS的底部添加此选项即可

.menupurple:after {
  border-bottom-color: #dda1d8;
};

.menupink:after { 
    border-bottom-color: #ff5e7e;
}

背景

CSS中当前控制三角形颜色的线条是

边框底部：10px solid#fff

当前，您正在覆盖紫色和粉色菜单中的背景色，但没有覆盖创建三角形的边框的颜色