Salve, devo modificare un menu che ho su un sito joomla, il menu è questo:


Come vedete gli sfondi azzurri per le voci del menu (tipo Home, Forum, Notizie) sono sballati, dovrebbero stare uno + distante dall'altro e dovrei orientarli sopra l'immagine di sfondo, infatti ognuno di questi spazi blu dovrebbe stare sopra quella specie di spada grigia. Non sono molto pratico e nn so come fare, come devo fare per fare queste 2 semplici cose?

Il mio css è questo
codice:
/* ################ left ######################## */
#left {
width: 170px;
background: url(../images/menubg.png);
color:#000;
font-size:1.2em;
margin:1px 0 0px 0px;
padding:5px 10px;
border:solid 0;
}

#left h3,#left h3 {
color:#FFFFFF;
font-family:Lucida Blackletter, sans-serif;
font-size:1.1em;
margin:0 0 0 15px;
padding:4px 5px 1px 5px;
border:solid 0;
}

#left ul {
list-style-type:none;
margin:0px 0 0px -10px;

}

#left ul li a {
display:block;
padding:1px 4px 3px 10px;
text-decoration:none;
background: url(../images/menuvocibg.png);
width: 107px;
height: 13px;
color:#000 !important;
font-size:0.9em;
}

#left ul li a:link,#left ul li a:visited {
color:#000;
font-weight:normal;

}

#left ul li a:hover,#left ul li a:active,#left ul li a:focus {
background: url(../images/menuvocibg2.png);
color:#000 !important;
font-size:0.9em;

}