problema con i menu sprite (link non cliccabili)

[mighi]

Ciao a tutti...mi capita spesso quando faccio un menu del tipo:

<ul id="image_map">
    <li id="social_1">Google plus
    <li id="social_2">Blog
    <li id="social_3">Twitter
    <li id="social_4">Facebook
    <li id="social_5">Tumbler[/list]

che i link non siano cliccabili...credo sia un problema di css...ma non riesco a venurne a capo...

ul#image_map{float:left;width:100%;position:relative;left:110px;}
ul#image_map,ul#image_map li{list-style-type:none;}
ul#image_map li{display: block;float:left;height: 30px;text-indent:-999px;}
ul#image_map li a,ul#image_map li a:hover{text-decoration:none;color:#000;}
li#social_1{background: url(../images/social.png) no-repeat left center;width:30px;}
li#social_2{background: url(../images/social.png) no-repeat -30px center;width:40px;}
li#social_3{background: url(../images/social.png) no-repeat -69px center;width:40px;}
li#social_4{background: url(../images/social.png) no-repeat -105px center;width:40px;}
li#social_5{background: url(../images/social.png) no-repeat -140px center;width:30px;}
li:hover#social_1{background: url(../images/social_hover.png) no-repeat left center;}
li:hover#social_2{background: url(../images/social_hover.png) no-repeat -30px center;}
li:hover#social_3{background: url(../images/social_hover.png) no-repeat -69px center;}
li:hover#social_4{background: url(../images/social_hover.png) no-repeat -105px center;}
li:hover#social_5{background: url(../images/social_hover.png) no-repeat -140px center;}

qualcuno ha qualche idea???

[Mich_]

Errori di sintassi e gravissimo errori di semantica.

Se hai l'hover sul[*], tutto quanto sta dentro non e` piu` cliccabile (ma dipende da come il browser interpreta l'errore).

E poi nel titolo dici di usare gli sprite, nel codice non ne fai uso.

Prova con:

ul#image_map {
  float:left;
  width:100%;
  position:relative;
  left:110px;
}
ul#image_map, ul#image_map li {
  list-style-type:none;
}
ul#image_map li {
  display: block;
  float:left;
  height: 30px;
  /* se metti qui il text-indent non vedrai il link */
}
ul#image_map li a, ul#image_map li a:hover {
  /* text-indent:-999px;  */  /* eventualmetne puoi metteerlo qui */
  text-decoration:none;    /* non ha senso con il text-indent che usi */
  color:#000;
  display: block;         /* altrimenti non puoi definirne le dimensioni */
  width: ...;              /* dimensioni necessarie per visualizzare lo sfondo */
  height: ...;
}
ul#image_map li a {
  background-position: 0 0;
}
ul#image_map li a:hover {
  background-position: .....;  /* deve essere coerente con l'immagine */
}

li#social_1 a { background: url(../images/social.png) no-repeat left center; width:30px; }
... ecc ...

[mighi]

ho spostato il text-indent nel tag a e ora funziona tutto....grazie
il fatto che non fossero clikkabili era comunque dovuto al fatto che un div successivo mi copriva parte del menu...grazie della dritta