Individuell farbige Dropdown-Menüs mit Dreiecken?

Question

Neuling hier.

Ich versuche Drop-Down-Menüs mit Dreiecken im oberen Bereich zu erstellen. Ich möchte, dass jedes Dropdown-Menü eine andere Farbe hat, aber ich kann nicht für das Leben von mir herausfinden, wie man jedes Dreieck verändern kann ... Ich habe hoch und niedrig gesucht und ich habe nicht viel Glück. Wenn jemand helfen könnte, würde ich es sehr schätzen! Hier ist, was ich verwende, um die Dreiecke zu machen.

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

Auch, wie ich schon sagte, bin ich auf diesen ziemlich neu, so dass, wenn es etwas flippig mit meinem Code ist, dass ich verbessern kann lass es mich wissen ... Danke! :)

https://jsfiddle.net/LtuyhLrr/1/

Answer 1

Sie müssen nur

Die Zeile in Ihrer CSS

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

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

Hintergrund dieses die Unterseite des CSS hinzufügen, die momentan laufende Dreiecke zu steuern Farbe der ist border-bottom: 10px solid #fff;

Derzeit überschreiben Sie die bac kground färbt das lila und rosa Menü, aber Sie überschreiben nicht die Farbe des Rahmens, der das Dreieck erzeugt.