單色下拉菜單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爲紫色和粉紅色菜單添加顏色，但不會覆蓋創建三角形的邊框的顏色。