Navileiste mit Grafiken

[yuro]

Hallo,

hab eine kleine Frage. Und zwar hab ich mir eine Navigationsleiste zusammengesetzt die aus 3 Menüpunkten besteht und submenüs. Bei den Submenüs hab ich die Hintergrundgrafik hinbekommen.

Nur bei den Menüpunkten krieg ich den Hovereffekt nicht hin

Hier der Code:

<div id="navigation">
<ul>
            <li>
            <a href="#">Menu Item 1</a>
                <ul> 
                    <li><a href="#">sub menu item 1</a></li>
                       <li><a href="#">sub menu item 2</a></li>
                       <li><a href="#">sub menu item 3</a></li>
                       <li><a href="#">sub menu item 4</a></li>
                    <img src="dropdown_sub_footer.png" /> 
                </ul>
            </li>

            <li>
            <a href="#">Menu Item 2</a>
                <ul> 
                    <li><a href="#">sub menu item 1</a></li>
                       <li><a href="#">sub menu item 2</a></li>
                       <li><a href="#">sub menu item 3</a></li>
                       <li><a href="#">sub menu item 4</a></li>
                    <img src="dropdown_sub_footer.png" /> 
                </ul> 
            </li>

            <li>
            <a href="#">Menu Item 3</a>
                <ul> 
                    <li><a href="#">sub menu item 1</a></li>
                       <li><a href="#">sub menu item 2</a></li>
                       <li><a href="#">sub menu item 3</a></li>
                       <li><a href="#">sub menu item 4</a></li>
                    <img src="dropdown_sub_footer.png" />
                </ul>
            </li>
        </ul>

</div>

#navigation {
    width: 758px;
    height: 32px;
    background-image: url(menu_black_bar.png);
}

/*zeigt auf jede <ul> in der Box Navigation*/
#navigation ul {
    margin:0px; 
    padding:0px;
}

/*zeigt auf <li>, der ein Kind von <ul> ist*/
#navigation ul li {
    display:inline;
    height:30px; 
    float:left; 
    list-style:none;
    /*margin-left: 15px;*/
    position: relative;
}

#navigation li a {
    color:#fff;
    width: 253px; 
    text-decoration:none;
    text-align: center;
    padding: 10px 77px;
}

#navigation li a:hover {
    background-image: url(menu_hover_left.png) no-repeat;
    text-decoration:underline;
}

#navigation li ul {
    margin: 0px;
    padding: 0px;
    display: none;
    position: absolute;
    left: 0px; 
    top: 32px;
    background-image: url(dropdown_sub_content.png);
    background-repeat: repeat-y;
}

#navigation li:hover ul {
    display: block;
    width: 257px; /*Breite des Untermenüs*/
}

#navigation li li {
    list-style: none;
    display: list-item;
    width: 100%;
}

#navigation li li a {
    color:#000; 
    text-decoration:none;
}

#navigation li li a:hover {
    text-decoration:underline;
}

bzw. haben alle 3 menüpunkte verschiedene hovereffekte die im code jetzt ned enthalten sind bis auf eins "menu_hover_left" wegen den abrundungen jeweils an der linken und rechten seite.