sabes programar? tienes algo hecho?
Acá hay uno básico sin las puntas triangulares:
.menu > li{
display: inline;
list-style-type: none;
border: 1px solid #FFFFFF;
background-color: #FF0000;
color: #FFFFFF;
padding: 5px 15px;
margin: 0;
}
Acá hice uno con las puntas triangulares:
.menu > li{
display: inline;
list-style-type: none;
border: 1px solid #FFFFFF;
background-color: #FF0000;
color: #FFFFFF;
padding: 5px 8px 5px 27px;
margin: 0;
position: relative;
margin-right: 2px;
}
.menu > li:first-child{
padding: 5px 15px;
}
.menu > li > span:first-child{
position: absolute;
top: 0;
right: -20px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-left: 20px solid #FF0000;
border-bottom: 15px solid transparent;
z-index: 9;
}
.menu > li > span:last-child{
position: absolute;
top: 0;
right: -22px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-left: 20px solid #FFFFFF;
border-bottom: 15px solid transparent;
z-index: 8;
}
Pruebalo:
http://jsfiddle.net/55LE5/No se ve muy pro pero te servirá como base para que hagas tu menú, a cada li deberias ponerle un display: block y darle una altura fija, unos 20px y de ahi alinear bien el triangulo y darle un float left a cada item y al final terminas con un clear:both debajo del ul y listo.