Servus!
Ich hab mal wieder ein Problem und hoffe dass mir jemand weiterhelfen kann :-|
Ich bin dabei eine Website zu erstellen. Hauptmenü ist ein vertikales Menü mit einer <ul> realisiert, soweit nichts neues. Die Untermenüpunkte sollen aber horizontal neben dem Hauptmenüpunkt angezeigt werden sobald darauf geklickt wird.
Ich habe das nach langem probieren geschafft, aber das ganze ist nicht sehr schön und vor allem nicht dynamisch, sprich ich müsste für jeden Menüpunkt eine eigene CSS-Klasse machen. Die Untermenüpunkte sind im DIV #zweite-ebene jeweils in einem <span> Mit einer ul li ul li wie ich es gewohnt bin habe ich es nicht geschafft weil beim float, clear usw. auch immer das Hauptmenü verschoben wird bzw. es plötzlich einen großen Spalt unter dem aktiven Hauptmenüpunkt gibt. Ich habe es nur mit position:absolute; geschafft, dass das Untermenü unabhängig vom Hauptmenü formatiert werden kann. Für einen anderen Menüpunkt stimmt diese Position natürlich nicht mehr.
So sieht es jetzt aus und so soll es auch aussehen:
Das CSS
Gibt es hier Lösungen? Bzw. woran liegt es dass ich kein einfaches "display:inline; float:left" machen kann beim Untermenü ohne das Hauptmenü damit zu zerstören?
Ich hab mal wieder ein Problem und hoffe dass mir jemand weiterhelfen kann :-|
Ich bin dabei eine Website zu erstellen. Hauptmenü ist ein vertikales Menü mit einer <ul> realisiert, soweit nichts neues. Die Untermenüpunkte sollen aber horizontal neben dem Hauptmenüpunkt angezeigt werden sobald darauf geklickt wird.
Ich habe das nach langem probieren geschafft, aber das ganze ist nicht sehr schön und vor allem nicht dynamisch, sprich ich müsste für jeden Menüpunkt eine eigene CSS-Klasse machen. Die Untermenüpunkte sind im DIV #zweite-ebene jeweils in einem <span> Mit einer ul li ul li wie ich es gewohnt bin habe ich es nicht geschafft weil beim float, clear usw. auch immer das Hauptmenü verschoben wird bzw. es plötzlich einen großen Spalt unter dem aktiven Hauptmenüpunkt gibt. Ich habe es nur mit position:absolute; geschafft, dass das Untermenü unabhängig vom Hauptmenü formatiert werden kann. Für einen anderen Menüpunkt stimmt diese Position natürlich nicht mehr.
So sieht es jetzt aus und so soll es auch aussehen:
Das CSS
Code:
#leftmenu a{
display:block;
width:67px;
border:1px solid #4b4b4d;
border-right:none; /* überschneidung mit vertikaler Linie */
padding-right:1px; /* Korrektur weil rechts kein border */
text-transform:uppercase;
font-family:'CabinMedium', HelveticaNeue, Arial, sans-serif;
font-size:8pt;
line-height:10pt;
color:#b1b3b4;
margin-bottom:8px;
text-decoration:none;
}
#leftmenu span.active a{
font-weight:bold;
color:#000000;
border-right:none;
padding-right:1px;
}
#zweite-ebene{
display:block;
position:absolute;
left:70px;
top:82px;
text-transform:none;
width:800px;
}
#zweite-ebene a{
width:auto;
display:inline;
float:left;
margin-right:3px;
padding-left:3px;
border:none;
border-left:1px solid #4b4b4d;
}
#zweite-ebene a:first-child{ /* Sonst grauer Rahmen links, überschneidung mit schwarzer linie */
border:none;
}
#zweite-ebene a.active{
font-weight:bold;
color:#000000;
}Gibt es hier Lösungen? Bzw. woran liegt es dass ich kein einfaches "display:inline; float:left" machen kann beim Untermenü ohne das Hauptmenü damit zu zerstören?
