ul { width:802px; height:41px; margin:0; padding:0; position:relative; } 
    /* šířka a výška jednoho řádku, ne výška obrázku! */
ul li, #navigation ul li a, ul li span { display:block; height:41px; overflow:hidden; margin:0; 
    padding:0; position:absolute; top:0; left:0; } 
    /* nastavíš taky výšku jednoho řádku - 35px nebo podle toho jak to máš. */
ul li a { font-size:1.4em; line-height:41px; text-align:center; } 
    /* nastavíš taky výšku jednoho řádku - 35px */
ul li.active a { background:#676767; color:#fff; } /* */
ul li a:hover { background:#282828; color:#fff; } /* */

ul li#k1 { width:130px; left:0; } /* šířka prvního + odsazení zleva */
ul li#k2 { width:130px; left:131px; } /* šířka druhého + odsazení zleva */
ul li#k3 { width:140px; left:261px; } /* šířka třetího + odsazení zleva */
ul li#k4 { width:115px; left:401px; } /* šířka čtvrtého + odsazení zleva */
ul li#k5 { width:135px; left:516px; } /* šířka čtvrtého + odsazení zleva */
ul li#k6 { width:150px; left:651px; } /* šířka čtvrtého + odsazení zleva */

ul li a { width:100%; } /* */
ul li a,
ul li a:link,
ul li a:visited,
ul li span { left:0; top:0; } /* */

ul li span { background:url('menu_x.gif') left top no-repeat; } /* načteš si obrázek */

ul li#k1 span { width:130px; background-position:left top; } 
    /* stejná šířka jako výše */
ul li#k2 span { width:130px; background-position:-131px top; } 
    /* stejná šířka jako výše + nastavíš pozici obrázku tak samo jak nahoře, jen s mínusem. */
ul li#k3 span { width:140px; background-position:-261px top; } 
    /* stejná šířka jako výše + nastavíš pozici obrázku tak samo jak nahoře, jen s mínusem. */
ul li#k4 span { width:115px; background-position:-401px top; } 
    /* stejná šířka jako výše + nastavíš pozici obrázku tak samo jak nahoře, jen s mínusem. */
ul li#k5 span { width:135px; background-position:-516px top; } 
    /* stejná šířka jako výše + nastavíš pozici obrázku tak samo jak nahoře, jen s mínusem. */
ul li#k6 span { width:150px; background-position:-651px top; } 
    /* stejná šířka jako výše + nastavíš pozici obrázku tak samo jak nahoře, jen s mínusem. */

ul li#k1 a:hover span, ul li#k1 a:focus span, ul li#k1 a:active span { background-position:left -41px; } /* první hodnota zůstane z přechozí čtveřice, druhá je posun obrázku o výšku řádku tj. -35.. */
ul li#k2 a:hover span, ul li#k2 a:focus span, ul li#k2 a:active span { background-position:-131px -41px; } /* první hodnota zůstane z přechozí čtveřice, druhá je posun obrázku o výšku řádku tj. -35.. */
ul li#k3 a:hover span, ul li#k3 a:focus span, ul li#k3 a:active span { background-position:-261px -41px; } /* první hodnota zůstane z přechozí čtveřice, druhá je posun obrázku o výšku řádku tj. -35.. */
ul li#k4 a:hover span, ul li#k4 a:focus span, ul li#k4 a:active span { background-position:-401px -41px; } /* první hodnota zůstane z přechozí čtveřice, druhá je posun obrázku o výšku řádku tj. -35.. */
ul li#k5 a:hover span, ul li#k5 a:focus span, ul li#k5 a:active span { background-position:-516px -41px; } /* první hodnota zůstane z přechozí čtveřice, druhá je posun obrázku o výšku řádku tj. -35.. */
ul li#k6 a:hover span, ul li#k6 a:focus span, ul li#k6 a:active span { background-position:-651px -41px; } /* první hodnota zůstane z přechozí čtveřice, druhá je posun obrázku o výšku řádku tj. -35.. */

ul li#k1.active a span { background-position:left bottom; } /* první hodnota zůstane z přechozí čtveřice, druhá je posun obrázku o výšku řádku tam, kde máš daný stav. já ho měl úplně poslední proto "bottom"tj. -35.. */
ul li#k2.active a span { background-position:-131px bottom; } /* první hodnota zůstane z přechozí čtveřice, druhá je posun obrázku o výšku řádku tam, kde máš daný stav. já ho měl úplně poslední proto "bottom"tj. -35.. */
ul li#k3.active a span { background-position:-261px bottom; } /* první hodnota zůstane z přechozí čtveřice, druhá je posun obrázku o výšku řádku tam, kde máš daný stav. já ho měl úplně poslední proto "bottom"tj. -35.. */
ul li#k4.active a span { background-position:-401px bottom; } /* první hodnota zůstane z přechozí čtveřice, druhá je posun obrázku o výšku řádku tam, kde máš daný stav. já ho měl úplně poslední proto "bottom"tj. -35.. */
ul li#k5.active a span { background-position:-516px bottom; } /* první hodnota zůstane z přechozí čtveřice, druhá je posun obrázku o výšku řádku tam, kde máš daný stav. já ho měl úplně poslední proto "bottom"tj. -35.. */
ul li#k6.active a span { background-position:-651px bottom; } /* první hodnota zůstane z přechozí čtveřice, druhá je posun obrázku o výšku řádku tam, kde máš daný stav. já ho měl úplně poslední proto "bottom"tj. -35.. */

ul li#k1.active a:hover span { background-position:left -41px; } /* tohle je stejné jako u ul li#k1 a:hover span, ul li#k1 a:focus span, ul li#k1 a:active span */
ul li#k2.active a:hover span { background-position:-131px -41px; } /* /* tohle je stejné jako u ul li#k2 a:hover span, ul li#k2 a:focus span, ul li#k2 a:active span */
ul li#k3.active a:hover span { background-position:-261x -41px; } /* /* tohle je stejné jako u ul li#k3 a:hover span, ul li#k3 a:focus span, ul li#k2 a:active span */
ul li#k4.active a:hover span { background-position:-401px -41px; } /* /* tohle je stejné jako u ul li#k4 a:hover span, ul li#k4 a:focus span, ul li#k3 a:active span */
ul li#k5.active a:hover span { background-position:-516px -41px; } /* /* tohle je stejné jako u ul li#k4 a:hover span, ul li#k4 a:focus span, ul li#k3 a:active span */
ul li#k6.active a:hover span { background-position:-651px -41px; } /* /* tohle je stejné jako u ul li#k4 a:hover span, ul li#k4 a:focus span, ul li#k3 a:active span */
/*
ano, ale musis to upravit podle tveho obrazku
rozmery, pozice
je to popsane v komentarich
*/