[CSS] Convertito da span ad ul ...ma perchè funziona male?

Ciao a tutti, ho convertito questo codice:

<a href="#"><span>Mappa del Sito</span></a> 

a questo:

<li><a href="#">Mappa del Sito</a></li> 

e naturalmente ho dovuto modificare il CSS...solo che nel convertire va tutto ok..tranne che non si vede l'immagine lato sinistro!
Ecco la foto: http://i39.tinypic.com/wi94ld.png
ed ecco come dovrebbe essere: http://www.free-css-templates.com/te...TIAL/unzipped/
Sapete dirmi il perchè non si fa? xD
Ecco il CSS:

#menulinks {
 width: 875px;
 height: 55px;
 background-image: url(../images/menulinks.png);
 clear: both;
 padding-left: 25px;
}

#menulinks ul {
 list-style-type:  none;
 padding: 0;
 margin: 0;
}

* html #menulinks li { /* Filter for IE6 to prevent li stacking */
 float:  left;
 text-decoration:  none;
}

* html #menulinks li { /* Filter for IE6 to prevent li stacking */
  float:  left;
  text-decoration:  none;
}

#menulinks li {
 padding-left: 14px;
 height: 50px;
 background-image: none;
 display: block;
 color: #FFFFFF;
 text-decoration: none;
 float: left;
 font-size: 14px;
 font-weight: bold;
}

#menulinks li a {
 padding-left: 16px;
 padding-right: 30px;
 padding-top: 17px;
 height: 35px;
 display: block;
 background-image: none;
 color: #FFFFFF;
 text-decoration: none;
 cursor: pointer;
 background-position:  left left;
}
  
  
#menulinks li a:hover, #menulinks li a.current {
 background-image: url(../images/menulinks_left.png);
 background-position: top left;
 text-decoration: none;
 color: #333333;
}

#menulinks li a:hover, #menulinks li a.current {
 background:  url(../images/menuhover.png) right top no-repeat;
 text-decoration: none;
} 

Grazie 1000...ciao Davide! ^^

Perchè devi dare la parte sinistra a li, poi dare un margin-left a span in base alla larghezza dell'angolo sinistro

...il problema è 1: sto usando un cms e richiamo il secondo codice (quello senza span) con una funzione di sNews...potrei farlo e solo che non voglio toccare il codice per i prossimi temi! :D xD

al posto di darlo a span lo dai ad a, non cambia niente, devi lavorare solo a livello css

...ok non ho capito cosa devo fare! é_é ...mi sono perso! p_P

#menulinks li {
 margin-left: 14px;
 height: 50px;
 background: url(LINK_IMMAGINE_SINISTRA) no-repeat left;
 display: block;
 color: #FFFFFF;
 text-decoration: none;
 float: left;
 font-size: 14px;
 font-weight: bold;
}

#menulinks li a {
margin-left: #px; /* Varia in base alla larfghezza dell'angolo, cambia in modo che si veda */
padding-left: 17px 30 0 16px; 
 height: 35px;
 display: block;
 background: url(LINK_IMMAGINE_DESTRA) no-repeat right;
 color: #FFFFFF;
 text-decoration: none;
 cursor: pointer;
 background-position:  left left;
}

Prova a smanettare con questo codice, altrimenti leggi qui: Menù a Tab Accessibile

allora...ho risolto smanettando un pò sui titoli (#menulinks ...) e ci sono riuscito! ;D
Solo che nel .current mi si vede solo la parte sinistra (a) e quando ci passo (a:hover) mi si vede anche la parte destra...come mai? xD
Ho sbagliato il titolo? xD
Ecco il nuovo css:

#menulinks li {
 padding-left:14px;
 height:50px;
 background-image:none;
 display:block;
 color:#FFFFFF;
 text-decoration:none;
 float:left;
 font-size:14px;
 font-weight:bold;
}

#menulinks li a {
 padding-left:16px;
 padding-right:30px;
 padding-top:17px;
 height:35px;
 display:block;
 background-image:none;
 text-decoration:none;
 cursor:pointer;
}
  
  
#menulinks li:hover, #menulinks li.current {
 background: url(../images/menulinks_left.png) top left no-repeat;
 color: #333333;
}

#menulinks li a:hover, #menulinks a.current {
 background:  url(../images/menuhover.png) right top no-repeat;
 text-decoration: none;
} 

Grazie 1000...ciao Davide! ^^

Prova così:

#menulinks li {
 padding-left:14px;
 height:50px;
 background-image:none;
 display:block;
 color: black;
 text-decoration:none;
 float:left;
 font-size:14px;
 font-weight:bold;
}

#menulinks li a {
 padding-left:16px;
 padding-right:30px;
 padding-top:17px;
 height:35px;
 display:block;
 text-decoration:none;
 cursor:pointer;
}
  
  
#menulinks li:hover, #menulinks li a:hover, #menulinks li.current {
 background: url(../images/menulinks_left.png) top left no-repeat;
 display: block;
 color: #333333;
}

#menulinks li:hover a:hover, #menulinks li:hover a, #menulinks li.current a  {
 background:  url(../images/menuhover.png) right top no-repeat;
 text-decoration: none;
}

Questo è il codice html che ho usato:

<ul id="menulinks">
 <li><a>Mappa del Sito</a></li>  
 <li class="current"><a>Mappa del Sito</a></li>  
</ul>

A me va

Grazie 1000 ;D... ora va!! Ciauuu! ^^

Sono contento che vada