Hintergrundbild Liste

[THE_fan]

Freunde, ich brauche euch!

Folgender Link: Freiwillige Feuerwehr Oberwalluf

Wenn man mit der Maus in der Navigation über "Wir über uns" fährt, sieht man, dass das eigentliche Hintergrundbild etwas verrutscht ist. Frage ist, wieso?! Liegt's eher am HTML oder am CSS?

Navigation ist so aufgebaut:

<div>
  <ul>
    <li>Wir über uns
        <ul>
           <li>Vorstand</li>
           <li>Einsatzabteilung</li>
           <li>...</li>
        </ul>
     </li>
  </ul>
</div>

CSS folgendermaßen

/*
--------------------------------------------------------------  NAVI
*/
#navi a{
  display:          block;
  background:       url("../images/nav_left.png") no-repeat left top; 
  padding:          5px 20px;
  color:            #ffffff;
  text-decoration:  none;
}

#navi a:hover{
  color:            #ffffff;
  text-decoration:  none;
}

#navi #current{
  background-image: url("../images/nav_right_on.png");
} 

#navi #current a{
  background-image: url("../images/nav_right_on.png")no-repeat;
  color:            #ffffff;
  text-decoration:  none;
}

#navi #current a:hover{
  background-image: url("../images/nav_left_on.png") repeat-x;
  color:            #ffffff;
  text-decoration:  none;
}

Sodele, wie löse ich das am besten?

Danke vorab.

 

[threadi]

Gib dem ersten <li> in dem aufklappenden <ul> die Klasse "first" und setze für diese Klasse ein anderes Hintergrundbild _ohne_ den roten Rand oben.

 

[THE_fan]

Habe gerade bemerkt, dass das Problem auch bei den anderen Links besteht.

//e
Jetzt habe ich es schonmal soweit, dass es in der Navigation richtig angezeigt wird.
Allerdings ist jetzt auch das Dropdown voll mit Grafiken und mit nem no-repeat o.ä. lässt sich da nichts ändern.

Ideen?