Działać działa

tylko nie w IE6, bo ten obsługuje :hover tylko dla A, a ty masz PRAWIDŁOWO dla LI.
Podobne działanie stosuję np tutaj:
http://doman.art.pl/2011-02-27
Jak masz CS5 to sobie odpal i zobacz
W twoim kodzie łatwo to naprawić - wystarczy, że background przepiszesz na A czyli:
Kod:
.menu {width:451px; height:50px; margin:0; padding:0;}
.menu li {height:50px; float:left; list-style:none;}
.menu a {background:url("menu.png") no-repeat; width:100%; height:51px; overflow:hidden; text-indent:-999px; display:block;}
.menu .link_1 {width:83px;}
.menu .link_1 a {background-position:0 0;}
.menu .link_2 {width:83px;}
.menu .link_2 a {background-position:-83px 0;}
.menu .link_1 a:hover {background-position:0 -51px;}
.menu .link_2 a:hover {background-position:-83px -51px;}
itp...
Ale ogólnie nie polecam tego