Creazione menu

[Pablo90]

Salve a tutti, io ho un menu che però mi da problemi..Ecco il codice:

                  <div id="telefilm-menu">                       <ul>                           <li class="first"></a>                         [*][url="http://www.***.com"]Sommario[/url]                          [*][url="http://www.***.com"]News[/url]                           [*]<span class="right">Episodi</span>                           [*]<span class="right">Cast</span>                           [*]<span class="right">Immagini</span>                           [*]<span class="right">Video</span>                          [*]<span class="right">Musica</span>                            [*]<span class="right">DVD</span>                          [*]<span class="right">Extra</span>                           [*]<span>Forum</span>                          <li class="last"></a>                      [/list]                  </div> 

CSS:

#telefilm-menu {
    margin: 124px 0 0 10px;
    font-weight: bold;
}
#telefilm-menu li.first {
    width: 10px;
    height: 36px;
    background: url("telefilmenu-sx.gif") no-repeat top left;
    padding: 0;
}
#telefilm-menu li.last {
    width: 10px;
    height: 36px;
    background: url("telefilmenu-rx.gif") no-repeat top left;
    padding: 0;
}
#telefilm-menu ul{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    float:left;
    height: 36px;
}
#telefilm-menu ul li{
    display:block;
    float:left;
    margin:0;
    background: url("telefilmenu.gif") repeat-x top left;
    color:#cccccc;
    text-decoration:none;
    line-height: 36px;
    vertical-align: middle;
    padding: 0 5px 0;
}
#telefilm-menu ul li span.right{
    background: url("telefilmenu-border.gif") no-repeat bottom right;
    display:block;
    line-height: 36px;
    padding-right: 10px;
}
#telefilm-menu ul li a{
    display:block;
    float:left;
    color:#000000;
    text-decoration:none;
    line-height: 36px;
    vertical-align: middle;
    padding: 0 8px 0 8px;
}
#telefilm-menu ul li a.right{
    background: url("telefilmenu-border.gif") no-repeat bottom right;
    display:block;
    line-height: 36px;
    padding-right: 10px;
    padding-left: 10px;
}
#telefilm-menu ul li a.current{
    display:block;
    float:left;
    color:#ffffff;
    text-decoration:none;
    line-height: 36px;
    vertical-align: middle;
    background: #006f9f;
}
#telefilm-menu ul li a.current:hover{
    color:#ffffff;
    text-decoration:none;
}
#telefilm-menu ul li a:hover{
    color: #000000;
    text-decoration: underline; 

Ecco il risultato:


Il problema è che per mettere lo sfondo blu toglie lo sfondo che sarebbe "la stanghetta" di destra..

Io lo vorrei così, però non saperei proprio come fare..

Sapete aiutarmi? grazie in anticipo