Frage HTML - Navigationsleiste - Problem mit verschiedenen Fenstergrößen

[TadeSF]

Hallo liebe HTML-Freunde!
Ich sitze schon seit längerem an einem Problem mit der Navigationsleiste einer Website. Vielleicht kann mir ja jemand helfen.

Als erstes der HTML-Teil um den es geht:
<div onmouseover="EINWIP()" onmouseout="AUSWIP()">
<a href="PlastikpolitikWas_Ist_Plastik.html" id="nachoben"><img src="PPI1.jpg" id="navi1" style="display:block" /></a>
<table border="0" bordercolor="red" id="Inh1" style="display:none;"><tr><td><table width="100%">
<tr id="Inhalt2"><td id="Inhalt1"><a href="PlastikpolitikWas_Ist_Plastik.html#Synthetikprodukt">Ein Synthetikprodukt</a></td></tr>
<tr id="Inhalt2"><td id="Inhalt1"><a href="PlastikpolitikWas_Ist_Plastik.html#Zerfall">Kein Zerfall</a></td></tr>
</table></td></tr></table></div>
Alle relevanten CSS Abschnitte:
#navi1 {position:fixed; width:20%; top:0px; left:0%;}
#Inh1 {position: fixed; width: 21%; background-color:white; top: 10%; left: -1%;}
#Inhalt2 {line-height: 2;}
#Inhalt1 {font-family: Arial;font-size: 15px;color: black;text-align: center;}

Und zu guter letzt mein JavaScript Teil:
function EINWIP(){
if(document.getElementById('Inh1').style.display == 'none'){
document.getElementById('Inh1').style.display = 'table';
}}
function AUSWIP (){
if(document.getElementById('Inh1').style.display == 'table'){
document.getElementById('Inh1').style.display = 'none';
}}

Dies ist nur ein Teil der Navigationsleiste (Nur 1 von 5 Segmenten)!

Erklärung:
Ich möchte mithilfe des <div onmouseover="EINWIP"()" onmouseout="AUSWIP()"> eine detalliertere Ausführung dieser Navigationsleiste aufrufen. Dies klappt auch alles. Mein Problem: Wenn ich das Fenster nun verschiebe oder an den Seiten- oder Größenverhältnissen herumschraube, dann ändert sich natürlich auch die Position der Tabelle, die ich aufklappen möchte. Meine Frage: Gibt es eine Möglichkleit, die Werte von #Inh1 {position: fixed; width: 20%; background-color:white; top: 10%; left: 0%;} (vorallem top: 10%;) nicht absolut, sondern als Variable festzulegen? Mit einer <ul> hab ich's schon probiert und alle meine Versuche, die Tabelle an das Navigationsbild anzuschließen, scheiterten. Wer in der Richtung noch Tipps hat, schreibt mir bitte auch, vielleicht bin ich ja noch nicht auf die Idee gekommen ;-).

Vielen Dank für Hilfen und Antworten schonmal im Vorraus!

Liebe Grüße,
TadeSF

 

[threadi]

Bitte verwende niemals Tabellen für Navigationsleisten. Ebenso kannst Du auch JavaScript zum Auf- und Zuklappen verzichten - das geht mittels hover. Wenn Du das nochmal mit <ul> aufgebaut hast und immernoch Probleme hast, zeig den dann aktuellen Code nochmal - komplett.

 

[TadeSF]

Ja vielen Dank! Ich werde es demnächst ausprobieren.