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

Horizontale Dropdown-Menüs rein mit CSS erstellen

Horizontale Dropdown-Menüs bieten eine einfach zu navigierende Erfahrung, da Benutzer mit der Maus über eine Primärseite fahren können Menüelement, um Untermenüs anzuzeigen. Um diesen Effekt allein mit CSS zu erzielen, sind einige Styling-Fähigkeiten erforderlich.

HTML-Struktur:

Erstellen Sie zunächst eine ungeordnete Liste (<ul>) mit

Elemente für jeden Menüpunkt. Untermenüs werden durch verschachtelte <ul>-Elemente dargestellt. Elemente.

CSS-Styling:

<ul>

Positionierung: Legen Sie den äußeren <ul> Element, das als Block angezeigt werden soll, und fügen Sie dem

-Element eine schwebende linke Seite hinzu. Elemente, um ein horizontales Layout zu erstellen.

Sichtbarkeit des Untermenüs: Blenden Sie zunächst die Untermenüs aus, indem Sie deren Anzeige auf „Keine“ setzen.

Menüelementstile:

<ul>

Definieren Sie Hintergrundfarbe, Abstand, Textfarbe und Rahmen für das Menü Elemente.

Hover-Effekte:

<ul>

Änderungen der Hintergrundfarbe beim Hover für Menüelemente hinzufügen.

Blenden Sie Untermenüs beim Hover ein, indem Sie ihre Anzeige auf „Blockieren“ einstellen und sie positionieren Absolut.

Responsive Untermenüs:

<ul>

Reduzieren Sie die Schriftgröße von Untermenüelementen, wenn Sie mit der Maus darüber fahren, um es einfacher zu machen Lesbarkeit.

Änderungen der Hintergrundfarbe zu Untermenüelementen hinzufügen schweben.

Beispielcode:

<ul>

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

ul li {
  display: block;
  position: relative;
  float: left;
}

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:
[Horizontales Dropdown-Menü in reinem CSS](http://jsfiddle.net/XPE3w/7/)

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