come indicare il tag <span>?

[nextpic]

Ciao a tutti ho questo problema, ho questo codice:

<div id="primary" class="clear-box">
    <ul class="links">
        <li class="menu127">
            <a title.....>
                 <span>Home Page</span>
            </a>
        
        <li class="menu186">
            <a title.....>
                 <span>Chi siamo</span>
            </a>
        
        ...........[/list]
</div>

Premetto che per esigenze di programmazioni in ogni tag "a" del sito sono inseriti dei tag "span".
Io vorrei applicare la B.I.R. per creare un menu grafico con effetto rollover tremite css.
Il mio problema è che non rieesco a impostare i tag "span" in modo da dargli questa dichiarazione:

position: relative; 	  
z-index: -1;

come dovrei mettere i selettori in modo da dargli la priorità su tutti gli altri "span" e regole css presenti nel sito? il codice css che ho scritto è il seguente:

#primary ul.links /* List of links */
  {
    margin: 0;
    padding: 0;
	list-style: none;
	background: url(menu.png) no-repeat;
	width: 918px;
	height: 30px;
	position: relative;
  }

  ul.links
  {
    margin: 0;
    display: inline;
  }

  #primary ul.links li
  {
	  position: absolute;
	  z-index: 1;
	  width: 148px;
	  height: 30px;
  }
  /*iserisco codice css nuovo per il menu primar_links */
  
  #primary ul.links a 
  {
	  display: block;
	  width: 100%;
	  height: 100%;
	  background: transparent url(menu.png no-repeat;
	  text-decoration: none;
  }
  
  #primary, span              
  {
	  position: relative;
	  z-index: -1;
  }
  
  #primary ul.links li.menu-127
  {
	  left: 16px !important;
	  top: 0px !important;
  }

  #primary ul.links li.menu-186
  {
	  left: 164px;
	  top: 0px;
  }
  
 .................
  
  #primary ul.links li.menu-127 a
  {
	  background-position: -16px 0px !important;
  }
  
  #primary ul.links li.menu-127 a:hover,
  #primary ul.links li.menu-127 a:focus,
  #primary ul.links li.menu-127 a:active
  {
	  background-position: -16px -30px !important;
  }
  
   #primary ul.links li.menu-186 a
   {
	   background-position: -164px 0px;
   }
   
  #primary ul.links li.menu-186 a:hover,
  #primary ul.links li.menu-186 a:focus,
  #primary ul.links li.menu-186 a:active
  {
	  background-position: -164px -30px;
  }
  
.........

Dove sbaglio? Ripeto queste regole devono avere la priorità su tutte le altre

Grazie mille!!!!