Ajouter un sortingangle avant le sous-menu en utilisant css

Comment puis-je append un sortingangle à l’exemple suivant Fiddle

Je dois supprimer le menu parent avec un fond blanc et afficher un sortingangle pour qu’il ressemble davantage à ceci

entrez la description de l'image ici

J’ai essayé d’append le css suivant mais je ne travaille pas

.dropdown li:first-child > a:after { { content: ''; position: absolute; left: 10px; top: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #0A8F36; opacity:0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); }

METTRE À JOUR:

J’ai réussi à le faire fonctionner dans une certaine mesure, mais j’ai toujours quelques problèmes de conception, toute aide est appréciée

Dernier violon http://jsfiddle.net/wPWDm/17/

J’espère que cela vous aidera, j’ai commenté certains de vos scripts css et jquery. En outre, ajouté un style à la fin s’il vous plaît veuillez référer ce lien fiddle

Le css que j’ai ajouté suit,

 .dropdown ul li:first-child > a:after { content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #028F41; }

Vous devez appliquer une classe aux éléments de la liste contenant des divs de liste déroulante, puis appliquer le pseudo-élément à celui-ci.

Exemple Codepen

J’ai essayé quelque chose en ajoutant des .arrow_div et css supplémentaires, cochez menuone vous verrez une flèche noire, peut-être ce que vous cherchez, meilleure suggestion avoir une image de fond qui ont une flèche et la définir comme fond votre menudiv

EXEMPLE DEMO