Si quieres utilizar sólo CSS añade un padding-top: 10px al <ul> y lo siguiente en tu hoja de estilos:
Código:
.children::before
{
border-bottom: 10px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: relative;
left: 10px;
top: 2px;
height: 0;
width: 0;
z-index: 10;
content: "";
display: block;
}
Si prefieres hacer otra cosa para segurar la compatibilidad con otros navegadores prueba a añadir algo como <div class="flecha"></div> dentro del <ul> (con el mismo padding-top que antes) y le pones también el mismo estilo o si lo prefieres lo modificas un poco y pones una imagen de una flecha de fondo.