Zentrierpseudoelement "Caret" ohne relative Position

Question

Ich habe ein kleines Caret, das ich für einen Hoverstate auf einigen Menüpunkten verwende. Hovering fügt nur eine kleine Klasse namens menu-caret hinzu, der ich ein Pseudoelement hinzufüge, um ein wenig Caret hinzuzufügen.

Die CSS für die carret sieht genauso aus wie so:

.menu-caret::before { 
    content:""; 
    position: absolute; 
    margin-left: 20px; 
    bottom: 0; 
    width: 0%; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid black; 
} 

Das Problem, das ich habe ist, würde Ich mag jede caret zum Zentrum (die Menüpunkte dynamisch sind in der Größe/Breite, sondern auch die halten Integrität des Hover-Untermenü ich hier an der richtigen Stelle hier

ist ia volle Arbeitsbeispiel (ohne caret fix) - http://codepen.io/ajmajma/pen/KgGxWL

ich weiß, dass ich etwas tun könnte:

ul { 
    width: 100%; 
    position: relative; 
    display: inline-block; 
    list-style-type: none; 
} 
li { 
    padding: 20px; 
    float: left; 
    position: relative; 
} 
.menu-caret::before { 
    content: ""; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    width: 0%; 
    margin-left: -5px; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid black; 
} 

Aber wenn Sie die relative Position hinzufügen, wird es mit der Größe des Untermenüs verwechselt (es sollte 100% Seitenbreite sein). Gibt es eine Möglichkeit, ein zentriertes Caret zu haben, ohne mein Untermenü zu stören?

Answer 1

Sie können den relativen Container ändern, für den Sie das Caret erstellen. Zum Beispiel an den a Tag bewegen:

.menu-caret > a::after { 
    content:""; 
    position: absolute; 
    left:50%; 
    margin-left: -5px; 
    bottom: -10px; 
    width: 0%; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid black; 
} 
.menu > ul > li a { 
    position: relative; 
} 

CodepenDemo