Problem mit Multi-Level-Menü

[Crusher]

Hallo zusammen,

ich habe ein kleines Problem, ich habe letztens ein kleines Tutorial gelesen, wo man ein Menü mit CSS gestalten kann und habe mich mal selbst an der Umsetzung versucht.
Es klappt auch, also das Menü funktioniert und alles, nur ich möchte statt einem normalen Hintergrund (also Hintergrundfarbe) ein Image einfügen und ich krieg das nich gebacken.

Ich habe mein Menü in Listenform aufgebaut:

ul id="nav">
<li><a href="#">Menüpunkt 1</a>
<ul>
<li><a href="#">Untermenüpunkt 1</a></li>
<li><a href="#">Untermenüpunkt 2</a></li>
<li><a href="#">Untermenüpunkt 3</a></li>
<li><a href="#">Untermenüpunkt 4</a></li>
</ul>
</li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>

Meine CSS Datei sieht folgendermaßen aus:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 160px;
	border-bottom: 1px solid #0081B8;
	}

ul li {
	position: relative;
  font-size: 0.9em;
  background-image: url(styles/nav_bg1.jpg);
	}

ul ul li a {
  background: #A2C7F1;
  padding: 0;
  font-size: 1em;
  }
  
ul a:hover {
  background-color: #2074D4;
  }

li ul {
	position: absolute;
	left: 159px;
	top: 0;
  width: 130px;
	display: none;
	}

ul li a {
	display: block;
	text-decoration: none;
	color: #FFF;
	background: #68A4E8;
	padding: 3px;
	border: 1px solid #0081B8;
	border-bottom: 0;
	}

li:hover ul, li.over ul { 
	display: block; 
  }

Wie könnte ich jetzt am einfachsten ein Bild hinter meine Listenpunkte (links) bekommen?
Habe schon versucht, die a´s direkt anzusprechen, aber dann wird der Hintergrund stumpf weiß und ich krieg kein Ergebnis.
Vielleicht weiß ja jemand von euch, wie ich das am geschicktesten jetzt anstelle.

Freue mich auf hilfreiche Antworten.

MfG
crushiii

[Mich@el]

Moin, ein Beispiel mit dem es klappen sollte:

PHP-Code:

<ul id="navigation">
  <li><a href="#">1</a></li>
  <li>2</li>
  <li>
    <ul>
      <li>2.1</li>
      <li><a href="#">2.2</a></li>
      <li><a href="#">2.3</a></li>
    </ul>
  </li>
</ul> 


Und dann direkt die id Navigation ansprechen:

PHP-Code:

ul#navigation li {
    background: url(deinBild.jpg) left top no-repeat;
    color: green;
    display: block;
    height: 28px;
    line-height: 28px;
    list-style-type: none;
    margin-bottom: 3px;
    padding: 1px 1px 1px 41px;
} 


Grüße
Michael

[Crusher]

Funktioniert immer noch nich

Der Hintergrund bleibt auch bei deiner Variante einfach weiß.
Ich versteh einfach nich, warum ich dem Hintergrund eine Farbe, sowie einen hover Effekt geben kann, aber kein BG-Image reinlegen kann.
Irgendwie alles wieder etwas komisch.

So langsam gehen mir auch ein wenig die Versuchsvarianten aus -.-

[Crusher]

Hab doch den kompletten Code hier drin stehen, einfach eben in ne txt einfügen, als html speichern und ab geht es
Aber das Problem ist primär gar nich mehr so wichtig, hab das Design einfach umgestellt und arbeite nur mit css colors.

Aber ein anderes Porb, ich hab im IE das Prob, dass die Untermenüs nicht mehr zugehen.
Kennt da jemand einen Hack für? Hab zwar schon einen drinstehen für die Darstellung, aber im IE ist halt das Prob, dass man entweder beim Verlassen der Hauptnavigation mit der Maus auch sofort das Untermenü geschlossen bekommt oder dass die einfach gar nich mehr zugehen und man alle auf einmal sieht.

Habe es übrigens mit dem IE7 getestet.

[Crusher]

Also ich hab immernoch das Problem, wenn ich im IE7 oder im Opera die Seite teste, die Linkmarkierungen so schnell verschwinden, dass ich keine Chance habe, in die Untermenüs zu navigieren.

Habe im Internet das gefunden :

A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them.

Habe also den li a nen Background zugewiesen, aber keine Änderung tritt ein. Die Markierung der Links verschwindet sofort, wenn ich den letzten Buchstaben des Linkes verlasse.
Ich muss damit es funktioniert, aber wie im Geckobrowser, die ganze Box markiert haben und nicht nur den Textlink.

Jemand ne Idee?