Frage zum Wiki-Artikel „Dropdown-Menüs mit CSS gestalten“

[Matthias Scharwies]

Servus!

So, nun denn. Link

Vielen Dank! So kann man arbeiten!

Ich untersuche Deine Seite mit dem Seiteninspektor (F12 drücken):

nav ist zwar display:flex; hat aber nur 1 Kindelement ul, welches sich über die komplette Breite zieht. (Da Du keinen Wert gesetzt hast, ist das nur die Breite aller Linktexte ohne weitere Ränder.) Du wolltest nav doch oberhalb des Inhalts haben:

main, nav {
    max-width: 64em;
    margin: auto;
    border: 2px dotted;
}

main {
    border-color: black;
}
nav {
    border-color: blue; 
}

display:block; ist nicht nötig. Das wissen alle Browser.

Tipp: Du kannst Elemente kennzeichnen, indem Du ihnen einen Rand (border) gibst, einen background-color oder eine outline. Der Rand verfälscht das Ergebnis etwas, da er ja 2px breit ist. Das spielt bei Flexbox aber keine Rolle - früher bei display schon.

Du müsstest die ul zum Flex-Container machen und ihre Kinder li zu Flex-Items:

nav ul {
  display: flex;
}

nav li {
  flex: auto;
}

Jetzt verteilen sich die nav li über die gesamte Breite.

Tipp: Wenn Du eh den Header mit Logo noch platzieren willst, probier mal Grid Layout.

Wenn Du display: flex durch display: grid ersetzt, benötigst Du keine Festlegungen für die Kindelemente!

Tipp: Mach die Klickfläche von nav a so groß wie möglich:

nav a {
  display: inline-block;
  width: 90%;
  text-decoration: none;
  background: tomato;
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;   /* Festlegungen immer in relativen Größenangaben! */
}

Tipp: Öffne die Beispiele der Tutorials in einem neuen Tab und untersuche mit dem Seiteninsektor F12 die CSS-Eigenschaften. Ändere die Werte und versuche sie so zu verstehen.

Nicht aufgeben!

Herzliche Grüße

Matthias Scharwies