menù a tendina: "figli" troppo distanti

[mmarammei]

menù a tendina: "figli" troppo distanti

Salve a tutti.
Ho costruito per il mio sito una barra con un menù a tendina orizzontale. Sono 13 sezioni, alcune delle quali si aprono in dei sotto-menù e una delle quali ha dei sotto-sotto-menù. Il sito è questo: lostrillonenews.com
Il sesto menù, in particolare, quello denominato "Lecce", si apre in tre sottomenù (a-d, e-m, n-z), ognuno dei quali genera un altro sotto-sotto-menù con l'elenco dei paesi in ordine alfabetico.
Il problema che ho è questo: i "figli" dei sottomenù secondari sono troppo distanti dalle categorie "padri" e quindi non si riesce a cliccare sui diversi paesi, perché è impossibile raggiungere velocemente e con precisione la giusta categoria.

Il codice che ho usato è solo css, senza alcun tipo di script, ed è questo:
#mbtnavbar {
background: #060505;
width: 900px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid;
height:35px;
}
li a, li a:link, li a:visited {
color:;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
li a:hover, li a:active {
background: #e8641a;
color:;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
li {
float: left;
padding: 0;
}
li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
li ul a {
width: 140px;
}
li ul ul {
margin: -25px 0 0 161px;
}
li:hover ul ul, li:hover ul ul ul, li.sfhover ul ul, li.sfhover ul ul ul {
left: -999em;
}
li:hover ul, li li:hover ul, li li li:hover ul, li.sfhover ul, li li.sfhover ul, li li li.sfhover ul {
left: auto;
}
li:hover, li.sfhover {
position: static;
}
li li a, li li a:link, li li a:visited {
background:;
width: 120px;
color:;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted;
}
li li a:hover, #mbtnavli li a:active {
background:;
color:;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

Non riesco a capire da cosa sia generato tutto quello spazio tra figli e padre. Come posso rendere fruibile il sottomenù?
Grazie a chiunque vorrà rispondermi.

[gattinara]

Buongiorno, Mmarammei;
nel css prova a modificare il margin del sottomenu da così:

#mbtnav li ul ul {
margin: -25px 0 0 161px;
}

a così:

Buon lavoro :)

[mmarammei]

Gattinara, non so come ringraziarti!!!! Funziona!! Avevo provato a cambiare il margine a tutti gli elementi, tranne a quello giusto:x
Grazie, grazie, grazie!

[gattinara]

Di nulla, è stato un piacere :)