[html][css] Menu obrazkowe

[mkas]

Witam, mam problem z poprawnym zakodowaniem prostego menu nawigacyjnego opartego na obrazkach. Przedstawię mniej więcej jak to powinno wyglądać:

Wszystko tutaj jest obrazkami:
a - lewa część menu,
b - obrazek o szerokości 1px powtarzany na całą szerokość,
c - obrazek z tekstem,
d - separator
e - prawa część menu.

Po najechaniu myszką na menu, powinno się zmieniać:
a na a' po najechaniu na pierwszą pozycję menu,
b na b' po najechaniu na któryś obszar z tekstem,
c na c' po najechaniu na któryś obszar z tekstem,
e na e' po najechaniu na ostatnią pozycję menu.

Oto co mam do tej pory:

Kod:

<ul id="menu">
    <li id="menu1"><a href="#" id="menu1" >
    <div id="menuLeft"></div></a></li>
    <li id="separator"></li>

    <li id="menu2"><a href="#" id="menu2" ></a></li>
    <li id="separator"></li>

    <li id="menu3"><a href="#" id="menu3" ></a></li>
    <div id="menuRight"></div></a></li>
</ul>

CSS:

Kod:

ul, ul li {
    display: inline;
    list-style: none;
}

li#separator{
    background-image: url('menu/m-bg.png');
}

#menu {
    overflow: hidden;
    width: 650px;
    height:51px;
}

li#menu1 {
    background-image: url('menu/m-bg.png');
    padding: 16px 10px 16px 0px;
}

li#menu1:hover {
    background-image: url('menu/m-bg-roll.png');
}

a#menu1 {
    display: inline;
    height: 51px;
    background-image: url('menu/m-menu1.png');
    background-repeat: no-repeat;
    padding-right: 61px;
}

a#menu1:hover {
    background-image: url('menu/m-menu1-roll.png');
}

li#menu2 {
    background-image: url('menu/m-bg.png');
    padding: 16px 10px 16px 10px;
}

li#menu2:hover {
    background-image: url('menu/m-bg-roll.png');
}

a#menu2 {
    display: inline;
    background-image: url('menu/m-menu2.png');
    background-repeat: no-repeat;
    padding-right: 100px;
}

a#menu2:hover {
    background-image: url('menu/m-menu2-roll.png');
}

#menuLeft {
    float: left;
    height: 51px;
    padding-right: 12px;
    margin-top: -15px;
    background-image: url('menu/m-bg-lewa.png');
}

#menuLeft:hover {
    background-image: url('menu/m-bg-lewa-roll.png');
}

#menuRight {
    width: 16px;
    height: 51px;
    float: right;
    margin-top: -15px;
    background-image: url('menu/m-bg-prawa.png');
}

#menuRight:hover {
    background-image: url('menu/m-bg-prawa-roll.png');
}

W takim układzie działa prawie wszystko, ale:
1. Nie wyświetlają się separatory.
2. Obrazek z tekstem c, zmienia się na c' dopiero po najechaniu na sam tekst, a chciałbym ,żeby zmiana nastąpiła po najechaniu w obszar menu z tym tekstem.
3. Po najechaniu w obszar z pierwszą lub ostatnią pozycją nie zmieniają się lewa/prawa część menu (a/e).

Proszę o pomoc jak zakodować te trzy rzeczy. Dzięki z góry.