dropdown navi mit img

[Inezza]

Hallo Leute!

Bin leider kein CSS und auch kein HTML-Profi, hoffe jedoch inständig um eure Hilfe.
Ich hab da  mit img eine aufklappbare navi-Leiste gebastelt. Sie lässt sich auch öffnen, wenn man mit der Mouse drüberfährt. Alles kein Problem.
Wenn diese auflappbare Navileiste in den Text der Homepage hineinragt, ist alles kein Problem. Ich kann trotzdem mit der Mouse alle Punkte des aufgeklappten Navis anklicken.
Ist auf der Homepage jedoch ein Bild, in welches das aufgeklappte Navi hineinragt, kann ich mit der Mouse nicht mehr die aufgeklappten Navipunkte anklicksen. Das verschwindet dann immer. Mit dem z-index funktioniert das auch nicht. Bitte um Hilfe!

Hier das HTML-Ding:

  
<div>  
	<ul id="navi">  
			<li><a href="Home.html"><img src="Home.png" height=25 alt="Home">  
			</a></a></li>  
		<li><a class="Shop" href="Shop.html"><img src="Shop.png" height=25 alt="Shop">  
		</a></a>  
		<ul>  
			<li><a href="Team.html"><img src="Team.png" height=25 alt="Team">  
		</a></a></li>  
			<li><a href="Oeffnungszeiten.html"><img src="Oeffnungszeiten.png" height=25 alt="Öffnungszeiten"style=>  
		</a></a></li>  
			<li><a href="Anfahrt.html"><img src="Anfahrt.png" height=25 alt="Anfahrt">  
		</a></a>			  
			</li>  
		</ul>  
	</li>  
	<li><a class="Mode" href="Mode.html"><img src="Mode.png" height=25 alt="Mode">  
		</a></a>  
	<ul id="Knoten_2">  
		<li><a href="Herbst2013.html"><img src="Herbst2013.png" height=25 alt="Herbst-Winter 2013">  
		</a></a></li>  
		</ul>  
	</li>  
	<li><a class="News" href="News.html"><img src="News.png" height=25 alt="News">  
		</a></a>  
		<ul id="Knoten_3">  
			<li><a href="Trends.html"><img src="Trends.png" height=25 alt="Trends">  
		</a></a></li>  
			<li><a href="Termine.html"><img src="Termine.png" height=25 alt="Termine">  
		</a></a></li>  
		</ul>  
	</li>  
	<li><a class="Newsletter" href="Newsletter.html"><img src="Newsletter.png" height=25 alt="Newsletter">  
		</a></a></li>  
	<li><a class="Kontakt" href="Kontakt.html"><img src="Kontakt.png" height=25 alt="Kontakt">  
	</a></a></li>  
</ul>  
</div>  

  
ul#navi{  
	float:left;  
	width:100%;  
	position:relative;  
	z-index:2;  
}  
ul#navi li{  
position:relative;  
float:left;  
width:9.375em;  
}  
ul#navi a{  
	display:block;  
	padding:0;  
	margin:0;  
	padding-left:100px;  
	padding-top:10px;  
	border-right:0px;  
	text-decoration:none;  
}  
  
ul#navi ul,  
ul#navi li:hover ul ul,  
ul#navi li:hover ul ul ul{  
position:absolute;  
left:-9999px;  
}  
ul#navi li:hover ul  
ul#navi li:hover ul ul  
ul#navi li:hover ul ul ul  
ul#navi li:hover ul ul ul ul  
ul#navi li:hover ul ul ul ul ul  
ul#navi li:hover ul ul ul ul ul ul  
ul#navi ul{  
top:auto;  
}  
ul#navi li:hover ul{  
left:0;  

Lg und großes DANKE schon im Voraus!!!