Navbar con triangulo abajo

[SonrisaCs]

Buenas noches, quería saber cómo hacer un navbar parecido al de ésta imagen:



Lo que no me sale es poner el triángulo justo debajo de cada link.
La navbar la tengo codeada con <ul> y <li>.
Sé cómo hacer los triángulos pero no puedo ubicarlos exactamente debajo del texto centrados en el medio, desde ya gracias!

Dejo mi código:

Código CSS:

nav li:after {
    position: absolute;
    left: 50%;
    content: "\00a0";
    display: block;
    width: 0px;
    height: 0px;
    border-width:0px 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #32a9de transparent;
}
 

Código HTML:

<nav>
    <ul>
    <li><a href="">Celulares</a></li>
    <li><a href="">Versus</a></li>
    <li><a href="">Sistemas Operativos (S.O.)</a></li>
    <li><a href="">ENLACE4</a></li>
    </ul>
    </nav>
 

Y una screen de cómo queda:

Se dan cuenta que no queda bien centrado? Ni idea por qué

PD: El rojo es sólo para que vean bien el div jajaja saludos!