Hallo,
ich schreibe gerade ein Menü und habe ein Lernbeispiel vorbereitet. Die Codes liegen anbei. Wie bekomme ich es hin, dass die sub und subsubdropdowns (für hier extra den Namen so eingetragen) zum Einen neben z.B. "Montag" anfangen und den Eintrag "Februar" nicht verschieben? Eine Javascriptvariante habe ich bereits, aber diese soll vermieden werden. Gibt es in CSS einen Befehl, der eine Listenüberlappung erlaubt?
Viele Grüße und vielen Dank schonmal!
ich schreibe gerade ein Menü und habe ein Lernbeispiel vorbereitet. Die Codes liegen anbei. Wie bekomme ich es hin, dass die sub und subsubdropdowns (für hier extra den Namen so eingetragen) zum Einen neben z.B. "Montag" anfangen und den Eintrag "Februar" nicht verschieben? Eine Javascriptvariante habe ich bereits, aber diese soll vermieden werden. Gibt es in CSS einen Befehl, der eine Listenüberlappung erlaubt?
Viele Grüße und vielen Dank schonmal!
Code:
//index.php <div id="Everything"> <div id="topBarMenu"> <div id="menuContainer"> <?php $Eebene= array("Januar", "Februar"); $Zebene= array("Montag", "Dienstag"); $Debene= array(1,2); echo '<link rel="stylesheet" type="text/css" href="main.css">'; echo '<ul id="dropdown">'; foreach ($Eebene as $erste_Ebene){ echo '<li><a href="#">' . $erste_Ebene . '</a>'; echo '<ul id="subdropdown">'; foreach ($Zebene as $zweite_Ebene){ echo '<li><a href="'. $zweite_Ebene .'" >'. $zweite_Ebene . '</a>'; echo '<ul id="subsubdropdown">'; foreach($Debene as $dritte_Ebene){ echo '<li><a href="'. $dritte_Ebene .'">'. $dritte_Ebene . '</a></li>'; } echo '</ul></li>'; } echo '</ul>'; } echo '</ul>'; ?> </div> </div> </div>
Code:
//main.css html { overflow-y:scroll; background-color: #FFFFCC; /* Hintergrund der gesamten Seite*/ font-family: Arial, Helvetica, sans-serif; } body { margin-top: 0px; margin-bottom: 0px; } #Everything { width: 900px; /* 900px */ margin-left: auto; margin-right: auto; border: 2px solid; /* 2px */ border-color: #359483; /* #C52E2D */ border-top: 0px; border-bottom: 0px; background-color: #FFFFCC; /* Hintergrund -nichtTextkörperHintergrund */ } a.topList:link {color:white; text-decoration:none;} a.topList:visited {color:white; text-decoration:none;} a.topList:hover {color:white; text-decoration:none; background-color:#297164;} <!--#000066 --> a.topList:active {color:white; text-decoration:none; background-color:#297164;} /* Menü unter den Bildern */ #topBarMenu { height: 30px; padding-left: 0px; background-color: #359483; /* Huntergrund Menüleiste gesamt */ } #menuContainer { width: 100%; z-index: 1; } #dropdown { margin: 0; padding: 0; z-index: 1; } #dropdown li { margin: 0px 20px 0px 20px; padding: 0; list-style: none; float: left; font: 18px arial; } #dropdown li a { display: block; margin: 0 1px 0 0; padding: 2px 6px 3px 6px; background: #359483; /* Hintergrundfarbe der Menüeinträge */ color: #FFF; /* Textfarbe der Menüleiste */ text-align: center; text-decoration: none } #dropdown li ul{ margin: 0; padding: 0; position: absolute; display: none; } #dropdown li:hover ul { display: block; /* Unternavigation in modernen Browsern einblenden */ } #dropdown li a:hover { background: #297164; /* OnMouseOver-Hintergrund #666 */ } #dropdown li ul li{ float: none; display: block; } #dropdown a, #dropdown span { display: block; width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */ padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid black; border-left-color: white; border-top-color: white; } #dropdown li ul li ul li{ display: none; } #dropdown li ul li:hover ul li{ display: block; }
Kommentar