problema allineamento sottomenu

[Veronica83]

Ciao a tutti, sono giorni che provo a capire come allineare sotto la relativa voce il submenu, ed avvicinare poi il terzo sub, ma proprio non ci riesco.
C'è qualcuno più esperto di me?
Vi inserisco l'html del template per il dropdown menu e vi linko il blog per capire meglio cosa intendevo
Grazie in anticipo.

/********************************/
/*** Navigation ***/
/********************************/


#navigation {
background: #FD707A;
height: 60px;
position: fixed;
z-index: 999999;
width: 100%;
-webkit-backface-visibility: hidden;
background: #FD707A;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.11);
-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.11);
-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.11);
}

.slicknav_menu {
display:none;
}


#navigation .container {
position:relative;
}

.menu {
float:left;
}


.menu li {
display:inline-block;
margin-right:22px;
position:relative;
}


.menu li a {
font-family: "Raleway", sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 2px;
color: #ea9999;
line-height: 60px;
text-transform: uppercase;
display: inline-block;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;

/*** DROPDOWN ***/

.menu .sub-menu,
.menu .children {
background-color: #ea9999;
display: none;
padding: 0;
position: absolute;
margin-top:0;
left:0;
z-index: 99999;

}

ul.menu ul a,
.menu ul ul a {
color: #ea9999;
margin: 0;
padding: 6px 10px 7px 10px;
min-width: 160px;
line-height:20px;
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
border-top:1px solid #333;
}

ul.menu ul li,
.menu ul ul li {
padding-right:0;
margin-right:0;
}


ul.menu ul a:hover,
.menu ul ul a:hover {
color: #ea9999;
background:#ea9999;
}


ul.menu li:hover > ul,
.menu ul li:hover > ul {
display: block;
}

.menu .sub-menu ul,
.menu .children ul {
left: 100%;
top: 0;