menu con css personalizado

[mktalternativa]

Hola compañero de foros del web estoy maquetando un menu y necesito que me quede asi




el problema principal es el pequeño triangulo debajo del nombre y la distancia , que me recomiendan para que me quede asi?

gracias!!!

[NSD]

podria ser un pequeño png colocado de fondo, centrado no repeat top

[pzin]

Puedes hacerlo mediante CSS, usando un pseudo-elemento y jugando con los bordes para que forma un triángulo:

Código CSS:

ul.submenu {
  position: relative;
}
 
ul.submenu:before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid gold;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: '';
}