Ciao ragazzi, ho un menu lateralte, classico, che occupa la colonna sinistra di una pagina a 3 colonne.

Funziona perfettamente, ma vorrei dargli un abbellimento grafico.
Così ho pensato di aggiungere un "tetto" e una "base" tondeggianti, un pò come quelli del menu di html.it

Vi spiego quello che ho fatto e mi dite dove sta il problema.

La colonna dedicata al menu si chiama "navigation"; ho pensato di infilare sia il menu, sia le immagini stondate (sopra e sotto) all'interno di un div.

Per il momento ho fatto solo una prova, le immagini che vedrete e che dovrebbero fare da "sopra" e "sotto", sono solo dei rettangoli neri che poi saranno sostituiti.

Premetto che nel codice che leggerete, troverete un "[/CODE] <?php show_menu2(); ?>" . Non fateci caso: è un modulo del cms che uso, che si sostituisce all'elencazione delle varie voci del menu tramite div.

Questo è il codice:

PHP
codice:
<div id="navigation">   
<div id="containermenu">
<div id="sfondosopra">[img]/media/Tetto.jpg[/img]
</div>
              <?php show_menu2(); ?> 
</div>
<div id="sfondosotto">[img]/media/Tetto.jpg[/img]
</div>
</div>
CSS
codice:
#navigation{
float: left;
width: 170px;
width: 180px;
width: 170px;
font-family: Arial, "Times New Roman", serif;
text-decoration: none;
}

#navigation ul{
list-style: none;
padding-left: 15px;
}

#navigation li{
font-size: 13px;
}

#navigation a:link, #navigation a:visited{
display: block;
background-color: #ed0b16;
color: #fff;
padding: 0.3em 0.6em  0.3em 1em;
margin: 0;
text-decoration: none;
border-bottom: 1px solid  #ffffff;
}

#navigation a:hover, #navigation a:focus, #navigation a:active{
background-color: #8a8484;
color: #FFFFFF;
}

#sfondosotto{
padding-left: 15px;
}
Come potete vedere però, le cose non vanno:



Vorrei che le bande nere (che faranno da sopra e sotto del menu) fossero attaccate (o comunque a 1px di distanza).

Invece pare che ci sia un padding attorno al menu (sopra, sotto, a destra e a sinistra).

Come posso risolvere?

Scusate per la lunghezza e grazie per la pazienza!