Navigation per Menue und klickbare Icons

[WiMu]

Hallo Forum,

mein Problem ist etwas kompliziert zu erklären ... bitte Geduld ;)

Ich habe auf meiner Seite eine vertikale Menue-Leiste mit drei Haupmenuepunkten und direkt darunter – ebenfalls vertikal angeordnet - zu jedem Menuepunkt ein Unterverzeichnis. Per hover und einer Klasse für das gerade aktierte Menue, wird per CSS entsprechendes Untermenue angezeigt bzw. versteckt. Das Hauptmenue ist zentriert und die Untermenues werden linksbündig angezeigt, d.h. der erste Eintrag im Unterverzeichnis befindet sich genau unter dem ersten Eintrag im übergeordneten Verzeichnis, auch wenn gerade der zweite oder dritte Hauptmenuepunkt aktiviert ist oder mit der Maus überfahren wird. Alles soweit in Ordnung und funktioniert problemlos.
Jetzt kommt der Haken:
Zusätzlich zu den links im Menue soll der Nutzer auf einigen Seiten per klickbaren Icons navigieren können, die über die ganze Seite verteilt sind (sowas wie 'ne Imagemap). Da, wie im Menue, immer nur das aktivierte oder mit der Maus berührte Icon sichtbar sein soll, dachte ich mir, packe ich doch einfach die Icons mit ins Menue und lasse die eben wie die links selbst ein- bzw. ausblenden; ungefähr so:

  
<!-- da ist 'n div drum mit text-align:center -->  
<ul id="menue">	  
	<li class="active"><h5><a href="1">Hauptmenue 1</a></h5>  
		<ul>  
			<li>  
				<a href="1.1.">Untermenue 1</a>  
				<img class="icon" src="...1.png" />  
			</li>  
			<li>  
				<a href="1.2.">Untermenue 2</a>  
				<img class="icon" src="...2.png" />  
			</li>  
			<li class="active">  
				<span>Untermenue 3</span>  
				<img class="icon" src="...3.png" />  
			</li>  
		</ul>  
	</li>  
	<li><h5><a href="2">Hauptmenue 2</a></h5>  
		<ul>  
			<!-- usw. -->  
		</ul>  
	</li>  
</ul>  

Das Anzeigen und Verstecken der jeweiligen Bilder selbst dürfe kein allzu großes Problem werden, aber:
wie kann ich per CSS beim Überfahren der Bilder auf den link im Menue zugreifen (um dessen Farbe zu ändern) und das jeweilige Untermenue switchen? Klar krieg' ich das mit Javascript hin, aber geht's vielleicht auch ohne?

Und zweitens: um das jeweilige Untermenue linksbündig unter den allerersten Hauptmenuepunkt zu kriegen, musste ich das Menue relativ positionieren, so dass ich die Icons nun ebenfalls nur relativ zum Menue positionieren kann – wenn aber der Benutzer z.B. nicht die entsprechende Schriftart installiert hat, ändert sich damit nicht nur die Größe des Menues, sondern eben auch die Position der Icons – und die müsste schon pixelgenau sein. Wie krieg' ich das position:relative weg, damit ich die Bilder immer von der linken oberen Ecke der ganzen Seite aus an die richtige Stelle schieben kann?

Mein CSS sieht im Moment ungefähr so aus:

  
ul#menue {  
	display:inline-block;  
	position:relative;  
	list-style-type:none;  
	height:49px;  
	padding:0;  
	margin:0;  
}  
  
ul#menue li {  
	float:left;  
	margin:0;  
	padding:0 10px;  
}  
  
ul#menue li h5 {  
	margin:0;  
	padding:0;  
	font-size:18px;  
	font-weight:normal;  
	cursor:default;  
}  
  
ul#menue li:hover  h5, ul#menue li.active  h5 {  
	color: #f78b1f;  
}  
  
ul#menue li.active:hover  h5 {  
	color: #f78b1f !important;  
}  
  
ul#menue:hover li.active h5 {  
	color: #fff;  
}  
  
ul#menue li h5 a {  
	color:inherit;  
}  
  
ul#menue li ul li a {  
	color: #52525e;  
}  
  
ul#menue li ul li a:hover {  
	color: #fff;  
}  
  
ul#menue li ul li.active span {  
	color: #fff;  
}  
  
ul#menue li ul {  
	list-style-type:none;  
	margin:0;  
	font-size:17px;  
	position:absolute;  
	left:0;  
	bottom:0px;  
	width:100%;  
	height:auto;  
	padding:9px 0 0 25px;  
}  
  
ul#menue li ul li {  
	margin:0 20px 0 0;  
	padding:0;  
}  
  
/* Menue anzeigen und vesrtecken per CSS */  
  
ul#menue li ul, ul#menue:hover li.active ul {  
	display:none;  
}  
  
ul#menue li:hover ul, ul#menue li ul:hover, ul#menue li.active ul, ul#menue li.active:hover  ul {  
	display:block;  
}  
  
/* und dann kommt natürlich noch ul#menue li ul li img { top:xy; left:xy } */  

Habe schon mit verschiedenen Kombinationen von display:inline/block; und margin:auto und width:irgendwas und so herumprobiert, hat mir aber immer entweder das ganze Ding nicht zentriert, oder das Untermenue nicht links-gebundet, so dass nur die Lösung mit inline-block (die mir gar nicht behagt) ürigblieb – auch mach ich sonst immer alles schön brav mit relativen Größenangaben, was aber leider in dem Fall (pixelgenau musses sein) nicht geht ...

Grüße,

WiMu