nicht angemeldet
Hi,
danke für die schnelle Antwort.
Dann bietet sich absolute Positionierung vielleicht an.
Ja dachte ich auch, das Problem damit ist nur das sich die Position aber immer an dem Grade ausgewähltem Link orientiert.
Dadurch rutscht mir das Bild auch immer eine Reihe tiefer wenn ich auf den nächsten tieferen Link gehe.
Ich weiß auch nicht irgendwie stehe ich mit der Sache auf dem Schlau.
Es soll bei jedem Link das gleiche Bild an der gleichen stelle erscheinen.
Wenn ich das mit absolute Positionierung mache muss ich für jeden Link ein Bild mit neuen Positionen nehmen. Aber das ist in diesem Fall übertrieben da ich nur ein Bild habe.
Das soll der Navigationshintergrund für das ausklapp Menü werden.
Mein CSS für das Menü:
#out {float:left; padding:0; margin:3px 0 0 75px; list-style:none; position:relative; width:120px;}
#out ul {padding:0; margin:0; list-style:none; width:120px; height:auto; background: url(file:///C|/Dokumente%20und%20Einstellungen/Hachem/Desktop/1/trans.gif); position:absolute; left:-9999px; top:0;}
#out li {float:left; margin-bottom:1px;}
#out li a {display:block; float:left; width:120px; height:24px; color:#000; line-height:24px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; text-decoration:none; }
#out li:hover {position:relative;}
#out li a:hover {position:relative; color:#fff;}
#out li:hover > a { color:#fff;}
#out :hover ul, #out :hover ul :hover ul {left:120px;}
#out :hover ul ul {left:-9999px;}
body {
background-color: #999999;
}
Das HTML dazu:
<body>
<ul id="out">
<li><a href="#url">eins</a>
<ul>
<li><a href="#url">1,1</a></li>
<li><a class="fly" href="#url">1,2</a>
<ul>
<li><a href="#url">1,1,1</a></li>
<li><a href="#url">1,1,2</a></li>
</ul>
</li>
<li><a href="#url">1,2</a>
<ul>
<li><a href="#url">1,2,1</a></li>
<li><a href="#url">1,2,2</a></li>
<li><a href="#url">1,2,3</a></li>
</ul>
</li><li><a href="#url">1,3</a>
<ul>
<li><a href="#url">1,3,1</a></li>
<li><a href="#url">1,3,2</a></li>
<li><a href="#url">1,3,4</a></li>
</ul>
</li><li><a href="#url">1,4</a>
<ul>
<li><a href="#url">1,4,1</a></li>
<li><a href="#url">1,4,2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#url">zwei</a>
<ul>
<li><a href="#url">2,1</a>
<ul>
<li><a href="#url">2,1,1</a></li>
<li ><a href="#url">2,1,2</a></li>
</ul>
</li>
<li><a href="#url">2,2</a>
<ul>
<li><a href="#url">2,2,1</a></li>
<li><a href="#url">2,2,2</a></li>
</ul>
</li><li><a href="#url">2,3</a>
<ul>
<li><a href="#url">2,3,1</a></li>
<li><a href="#url">2,3,1</a></li>
</ul>
</li><li><a href="#url">2,4</a>
<ul>
<li><a href="#url">2,4,1</a></li>
<li><a href="#url">2,4,2</a></li>
<li><a href="#url">2,4,3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#url">drei</a></li>
</ul>
</body>
Das ganze kommt dann über ein Bild, aber nur die erste Menüebene, daneben ist dann ein anderes größeres Bild über den Rest der Seite.
Wenn ich jetzt über einen Link gehe und die zweite Menüebene ausklappt soll darunter in gleicher höhe und breite ein Bild als Hintergrund für das Untermenü erscheinen und das Bild was sonst dort ist überdecken oder austauschen.
Mit freundlichen Grüßen
Psy