Auf dieser Seite verwende ich ein Dropdown-Menu. Es ist so eingerichtet, dass die Hauptmenupukte in der Navigationsleiste sichtbar sind und die Unterpunkte ausgeblendet sind und beim Überfahren der Hauptmenupukte mit der Maus eingeblendet werden. Dazu ist grundsätzlich folgendes css notwendig:
/* wesentlich für css-Dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1; /* Damit kann die aufklappende Menü-Box andere Inhalte überlagern*/
}
.dropdown:hover .dropdown-content {
display: block;
}
Damit funktioniert das Ein- und Ausblenden. Allerdings stören die Listenpunkte und es sit noch wenig dekorativ. Dem kann wie folgt Abhilfe geschaffen werden:
/* Variablen setzen*/
:root {
--main-bg-color: #445566;
}
/*alle Abstände auf Null setzen!*/
*{
margin: 0px;
padding: 0px;
}
header{
background-color:var(--main-bg-color); /*Hintergrundfarbe des headers */
padding-bottom:0.4em;
}
header h1{
font-size:135%;
text-align: center;/* Die Überschrift im Header zentrieren */
margin-bottom:0.5em; /* Einen Abstand unter der Überschrift einfügen*/
padding-top:0.6em;
color:#D6DA87; /*Farbe der Überschrift wählen*/
}
*Farbe es Navis*/
nav
{
color:#d2ffd2;
margin-bottom:0.2em;
}
/* 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;
}
/* Body stylen */
body{
background-color: #5D708E;
}