Mappa immagine in css, "spegnere" le parti desiderate

[KekkoDance]

http://fsardella.altervista.org/
Ho creato un menù a immagine messo insieme e separato con una mappa immagine in css:

/* Menu */
#menu {position: relative; background: url(images/menu.png) no-repeat; list-style-type: none; margin: 0px; padding: 0px; width: 744px; height: 41px; filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}
#menu:hover {position: relative; background: url(images/menu.png) no-repeat; list-style-type: none; margin: 0px; padding: 0px; width: 744px; height: 41px; filter:alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85;}
#menu li {display: block; position: absolute; margin: 0px; padding: 0px;}
#home {top: 0px; left: 0px; width: 129px; height: 41px;}
#about_me {top: 0px; left: 157px; width: 219px; height: 41px;}
#works {top: 0px; left: 376px; width: 140px; height: 41px;}
#contact {top: 0px; right: 0px; width: 172px; height: 41px;}
#menu a {display: block; width: 100%; height: 100%;}

Ho impostato un hover per il menù, con l'unica differenza di opacità, ma vorrei che si spegnesse soltanto la parte in cui si passa, non tutto il menù. Come posso fare?

[uffissimo]

non so se ho capito bene cosa hai fatto... puoi postare anche il codice html?

comunque prova a dare gli stili dell'evento "hover" a #menu a:hover invece di #menu:hover

ps. comunque non capisco perchè l'hai fatto così il menu... ma è una tua scelta.

[KekkoDance]

questo è l'html:

<ul id="menu">
    <li id="home">
    <li id="about_me">
    <li id="works">
    <li id="contact">[/list]

[KekkoDance]

ho modificato un pochino anche il css, ma non è cambiato nulla:

/* Menu */
#menu {position: relative; background: url(images/menu.png) no-repeat; list-style-type: none; margin: 0px; padding: 0px; width: 744px; height: 41px;}
#menu:link, #menu:visited {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}
#menu:hover {filter:alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85;}
#menu li {display: block; position: absolute; margin: 0px; padding: 0px;}
#home {top: 0px; left: 0px; width: 129px; height: 41px;}
#about_me {top: 0px; left: 157px; width: 219px; height: 41px;}
#works {top: 0px; left: 404px; width: 140px; height: 41px;}
#contact {top: 0px; right: 0px; width: 172px; height: 41px;}
#menu a {display: block; width: 100%; height: 100%;}

[KekkoDance]

EDIT: ci sono riuscito! Così:
Css:

#home {background: url('images/menu.png') -0px -0px no-repeat;	width: 129px; height: 41px;}
#about_me {background: url('images/menu.png') -157px -0px no-repeat; width: 219px; height: 41px;}
#works {background: url('images/menu.png') -404px -0px no-repeat; width: 140px; height: 41px;}
#contact {background: url('images/menu.png') -572px -0px no-repeat; width: 172px; height: 41px;}
#home, #about_me, #works, #contact {display: inline-block;}
#menu {list-style-type: none;}
#menu a:hover {filter:alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85;}

Html:

<ul id="menu">[*][*][*][*][/list]

Solo che adesso non so come fare allineato il menù Mi aiutate?
EDIT:
risolto anche allineamento