单色下拉菜单w /三角形？

Question

新手在这里。

我想创建下拉菜单样式与顶部的三角形。我希望每个下拉菜单都是不同的颜色，但是我不能为了我的生活而弄清楚如何让每个三角形改变......我搜索到了高低，我没有太多的运气。如果有人可以帮助，我会很感激！这是我用来制作三角形的东西。

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;

目前您正在覆盖bac kground为紫色和粉红色菜单添加颜色，但不会覆盖创建三角形的边框的颜色。