Hallo.

Hab das CSS für eine Seite im Firefox bereits fertig. Zu betrachten unter halb6.ha.funpic.de/halb6/halb6.html.
Nun muss es auf alle anderen gängigen Browsern abgestimmt werden. Ich bin gerad dabei, es für den IE7 zu machen.
Folgendes Problem: Das Hintergrundbild beim Navigationsmenü links von einem Menüeintrag, das gerade aktuell ist (rot), wird nicht angezeigt, weil es über den übergeordneten Bereich hinausgeht. Deutlicher wird das Problem, wenn ihr es mit der Version im Firefox vergleicht.
Versucht habe ich es bereits mit "overflow" und "z-index" und Vergrößerung von der Breite des übergeordneten Bereichs mit width, doch alles ohne Erfolg.

Kritischer HTML-Code:

HTML-Code:

<div id="navigation_menu">
<ul>
 <li><a href="#">Unterkategorie 1</a></li>
 <li><a href="#">Unterkategorie 2</a></li>
 <li><a href="#">Unterkategorie 3</a></li>
 <li><a href="#" class="current">Unterkategorie 4</a>
  <ul>
	 <li><a href="#">Kapitel 1</a></li>
	 <li><a href="#" class="current">Kapitel 2</a></li>
	 <li><a href="#">Kapitel 3</a></li>
	</ul>
 </li>
 <li><a href="#">Unterkategorie 5</a></li>
 <li><a href="#">Unterkategorie 6</a></li>
</ul>
</div>

Kritischer CSS-Code:

HTML-Code:

#navigation_menu {
display: block;
position: absolute;
background-image: url(navigation_menu.png);
background-repeat: no-repeat;
height: 800px;
margin: 220px 0px 0px 50px;;
}

#navigation_menu ul {
display: block;
position: absolute;
margin: 0px 0px 0px 30px;
font-size: 12px;
font-weight: bold;
}

#navigation_menu ul li {
display: block;
margin: 20px 0px 0px 0px;
list-style: none;
}

#navigation_menu ul li a {
text-decoration: none;
color: #253975;
}

#navigation_menu ul li a.current {
display: block;
background-image: url(menu_sub_category.png);
background-repeat: no-repeat;
background-position: left center;
margin: 0px 0px 0px -20px;
padding: 0px 0px 0px 20px;
color: #d7001c;
}

/*------------*/

#navigation_menu ul li ul {
display: block;
position: relative;
margin: 5px 0px 0px 30px;
font-size: 10px;
font-weight: bold;
}

#navigation_menu ul li ul li {
display: block;
margin: 0px 0px 0px 5px;
font-size: 10px;
font-weight: bold;
}

#navigation_menu ul li ul li a.current {
display: block;
background-image: url(menu_chapter.png);
background-repeat: no-repeat;
background-position: left center;
height: 15px;
margin: 0px 0px -1px -40px;
padding: 1px 0px 0px 40px;
}

Hoffe ihr könnt mir helfen...?

J!M!