Anfängerfrage zu Drop-Down-Menue

[3iggy]

[TABLE="class: tborder vbseo_like_postbit, width: 100%, align: center"]
[TR]
[TD="class: alt1, bgcolor: #F0F0EB"]Hallo,

ich habe lange nicht an online-Projekten gearbeitet und muss mir daher jetzt mühsam css-Kenntnisse aneignen. Und wie das so ist im Alter: Es fällt einem viel schwerer.

Ich versuche gerade ein bestehendes Menü an zwei Stellen runterklappen zu lassen. Allerdings klappt das irgendwie nicht: Die Unterpunkte erscheinen immer auf der selben Linie wie der Rest.

Hier mal der html-Code:

<div id="menu">
<ul>
<li><a class="current" href="index.html" title="">Home</a></li>
<li><a class="menu ul ul" title="">Hauptthema1</a>
<ul>
<li><a href="#">Unterpunkt1a</a></li>
<li><a href="#">Unterpunkt1b</a></li>
<li><a href="#">Unterpunkt1c</a></li>
</ul>
</li>
<li><a href="#" title="">Hauptthema2</a>
<ul>
<li><a href="#">Unterpunkt2a</a></li>
<li><a href="#">Unterpunkt2b</a></li>
<li><a href="#">Unterpunkt2c</a></li>
</ul>
</li>
<li><a href="#" title="">Hauptthema3</a>
<ul>
<li><a href="#">Unterpunkt3a</a></li>
<li><a href="#">Unterpunkt3b</a></li>
</ul>
</li>
<li><a href="#" title="">Kontakt</a></li>
<li><a href="#" title="">Impressum</a></li>
</ul>
</div>
</div>

Und hier noch das CSS:

/*----------------------menu-------------------------*/
#menu{
width:900px;
height:42px;
padding:0px;
clear:both;
background:url(images/green_box_bg.gif) no-repeat left #50a842;
}
#menu ul{
list-style:none;
padding:0 0 0 10px;
margin: auto;
display:block;
}
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
#menu ul li:hover ul {
display: block;
}
#menu ul li{
list-style:none;
float:left;
width:auto;
height:42px;
padding:0px;
line-height:42px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#menu ul li a{
height:42px;
width: auto;
float:left;
text-decoration:none;
padding:0 0 0 25px;
margin:0px 3px 0px 3px;
color:#fff;
text-align:center;
}
#menu ul li a:hover{
height:42px;
width: auto;
text-decoration:none;
color: #fff;
padding:0 0 0 25px;
background:url(images/menu_arrow.gif) no-repeat left;
}
#menu ul li a.current{
height:42px;width: auto;float:left;text-decoration:none;padding:0px;color: #fff;padding:0 0 0 25px; background:url(images/menu_arrow.gif) no-repeat left;
}

Ich bin sehr sicher, dass es sich um einen ganz blöden Anfängerfehler handelt, bei dem der eine oder andere vor Lachen auf dem Boden zusammenbricht, aber ich komm nicht drauf und mir fehlen sicher hier und da die nötigen Vokabeln. Ich wäre daher sehr dankbar, wenn mir jemand hier helfen könnte.

Vielen Dank!
3iggy[/TD]
[/TR]
[/TABLE]

 

[Marv]

Hallo,

Du hast die liste mit ausklappenden Menüpunkten zwar schon absolute positioniert, du hast aber noch keine angaben zur positionierung gemacht, deshalb bleiben sie auch oben an der Stelle des Elternelements.

Verschiebe also die Untermenüs mit den Positionierungen "Top" und "left"

Bsp (ergänzt um 40px einrückung nach unten):

#menu ul ul {

    display: none;
    position: absolute;
    top: 40px;
    z-index: 2;
}

Bitte beachte: Wenn du dich wunderst, dass du die Untermenüpunkte jetzt nichtmehr siehst: Weißer Text auf Weißem Hintergrund könnte ein Problem sein ;)

 

[djheke]

Vertikale Aufklapp-Navigation mit CSS