Submenu en css corrido

[alonsoeduardo]

Sres: una necesito una pequeña ayuda, tengo un menú en css solamente, adjunto imagen, resulta que el submenu queda corrido con respecto a la opción que lo ejecuta. Agradecería saber que es lo que me está faltando.
Gracias

[URL="http://sdrv.ms/YQP9cj"]http://sdrv.ms/YQP9cj[/URL]

y el css.

Código:

.menu{
    list-style:none;
    margin:0;
    padding:0;
}

.menu >li {
float:left; 
}

.menu li a {
    color:#0c9ba0;
    display:block;
    border-bottom:1px solid;
    border-color:#0c9ba0;
    padding:10px 12px;
    text-decoration:none;
    margin-left:5px;
}

.menu li .flecha{
    font-size: 9px;
    padding-left: 6px;
    display: none;
}

.menu li a:not(:last-child) .flecha {
display: inline;
}

.menu li a:hover {
    background:#0c9ba0;
    color:#fff;
}

.menu li {
position:relative;
}