Zu den Details weiter unten mehr.
In diesem Beispiel habe ich das Flexlayout genutzt, um auf einfache Weise die Hauptmenüpunkte innerhalb meiner Navigation anzuordnen. Dazu habe ich folgendes CSS verwendet:
/*Farbe es Navis*/
nav
{
color:#d2ffd2;
margin-bottom:0.2em;
}
nav >ul{
display: flex;
flex-direction: row;
justify-content: start;
}
/* das Aufklappmenü stylen */
.dropdown
{
width:6em; /* feste Breite für alle Menüpunkte, nach der sich die Untermenüs ausrichten */
text-align:center;
}
.dropdown-content
{
background-color: #776611; /*Hintergrundfarbe der aufgehenden Box*/
width:auto; /*Breite nach dem Inhalte der Navigationsmenüpunkte */
min-width: 100%; /* mindestens so breit wie Hauptmenüpukt */
padding:0;
box-size: border-box; /* Größenangben beziehen sich immer auf die Gesamtgröße ink. Rahmen */
}
.dropdown-content li{
list-style-type: none; /* Listenzeichen ausblenden*/
border:2.0px outset black;
background-color: #D99F55; /*Hintergrundfarbe der aufgehenden Box*/
margin: 0.4em;
}
/* Listenpunktformatieren beim Überfahren mit der Maus */
li:hover{
color:#66CC66;
background-color:Gold;
}
Man beachte
nav >ul{
display: flex;
flex-direction: row;
justify-content: start;
}
Weitere Erläuterungen zum Flexlayout werden an dieser Stelle ggf. später ergänzt, werden aber für das Layout dieser Seite nicht benötigt.