带有三角形的单独彩色下拉菜单

Question

newbie在这里。

我正在尝试创建菜单上的菜单，顶部是带有三角形的菜单。我希望每个下拉菜单都是一种不同的颜色，但是我一生都无法弄清楚如何使每个三角形更改...我搜索高和低，而且我没有很多运气。如果有人能提供帮助，我真的很感谢它！这是我用来制作三角形的方法。

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; }

另外，就像我说的那样，我对此非常新鲜，因此，如果我的代码有任何时髦的东西，我可以改进，请让我知道...谢谢！：(

https://jsfiddle.net/ltuyhlrr/1/

Answer 1

您只需要添加CSS

的底部

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

背景

当前控制三角形的颜色的CSS中的行是border-bottom: 10px solid #fff;

当前，您正在超越背景颜色紫色和粉红色的菜单，但您并没有超越创建三角形的边框的颜色。