Wie kann ich ein Dropdown-Menü nur mit CSS erstellen?

Reine CSS-basierte Dropdown-Menüerstellung

In der Webentwicklung sind Dropdown-Menüs ein häufiges UI-Element, das zum logischen Organisieren und Präsentieren von Auswahlmöglichkeiten verwendet wird. Wenn Sie ein Dropdown-Menü wünschen, ohne auf externe Frameworks oder JavaScript angewiesen zu sein, kann reines CSS eine geeignete Lösung liefern.

Pure CSS Dropdown-Menü-Implementierung

Um ein reines CSS zu erstellen -basiertes Dropdown-Menü, folgen Sie diesen Schritten:

1. HTML-Struktur: Definieren Sie eine ungeordnete Liste (
   ), wobei jedes Listenelement (
   • ) ein Menüelement darstellt. Verschachteln Sie innerhalb der Listenelemente andere ungeordnete Listen für Untermenüs.
   • Stil: Verwenden Sie CSS, um das Menü zu formatieren. Stellen Sie die UL so ein, dass sie keine Aufzählungszeichen, keine Ränder und eine horizontale Ausrichtung hat. Positionieren Sie die Li-Elemente im Inline-Block für eine horizontale Ausrichtung.
   • Dropdown-Sichtbarkeit: Um die Sichtbarkeit von Untermenüs umzuschalten, verwenden Sie die Pseudoklasse :hover für Listenelemente. Wenn Sie mit der Maus über ein Listenelement fahren, wird dessen Untermenü (ul) sichtbar.
   • Menüdarstellung: Passen Sie das Erscheinungsbild von Menüelementen, Untermenüs und Links mithilfe von CSS-Eigenschaften wie Hintergrundfarbe, Farbe und Polsterung.

Beispiel Code

Der folgende Codeausschnitt stellt ein Beispiel für ein reines CSS-basiertes Dropdown-Menü dar:

HTML:

CSS:

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: inline-block;
  position: relative;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover {
  background: #617F8A;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

li:hover a {
  background: #617F8A;
}

li:hover li a:hover {
  background: #95A9B1;
}

Live-Demo: [jsfiddle.net/XPE3w/7/](http://jsfiddle.net/XPE3w/7/)

Das obige ist der detaillierte Inhalt vonWie kann ich ein Dropdown-Menü nur mit CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!