Wie erstelle ich ein reines CSS-Dropdown-Menü?

Erstellen eines reinen CSS-Dropdown-Menüs

Im Bereich Webdesign geht es um die Möglichkeit, ein nahtloses, benutzerfreundliches Navigationsmenü zu erstellen von größter Bedeutung. Unter den verschiedenen Menüstilen zeichnen sich Dropdown-Menüs durch ihre Fähigkeit aus, Navigationsoptionen elegant zu organisieren und anzuzeigen. Dieser Artikel befasst sich mit der komplizierten Kunst, ein reines CSS-Dropdown-Menü zu erstellen, das nicht nur funktional, sondern auch optisch fesselnd ist.

HTML-Struktur

Die HTML-Struktur für a Das grundlegende Dropdown-Menü ist relativ einfach. Wir beginnen mit einer ungeordneten Liste (

), die als Container für unsere Menüpunkte dient. Innerhalb der Liste wird jeder Menüpunkt durch einen Listenpunkt (
• ) dargestellt.

  Beispiel-HTML:

  CSS-Styling

  Um die HTML-Struktur in ein funktionales Dropdown-Menü umzuwandeln, verwenden wir das folgende CSS Stile:

  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;
  }

  So funktioniert es

  Der anfängliche Stil legt das Gesamterscheinungsbild des Menüs fest, einschließlich Schriftart, Rand und Abstand. Die Standardanzeigeeigenschaft ist für li-Elemente auf Block eingestellt, sodass diese horizontal angezeigt werden können. Dropdown-Untermenüs werden zunächst ausgeblendet, indem ihre Anzeigeeigenschaft auf „Keine“ gesetzt wird.

  Der Hover-Status ist so definiert, dass Untermenüs mit der Position „absolut“ angezeigt werden und sie unter ihren übergeordneten Elementen ausgerichtet werden. Darüber hinaus erben die li- und a-Elemente des Untermenüs Stile, um ein einheitliches Erscheinungsbild zu gewährleisten. Wenn Sie mit der Maus über Unter-Untermenüelemente fahren, wird die Hintergrundfarbe weiter geändert.

  Fazit

  Das Erstellen eines reinen CSS-Dropdown-Menüs erfordert sorgfältige HTML-Strukturierung und durchdachtes CSS-Styling. Durch die Beherrschung dieser Techniken können Webdesigner die Leistungsfähigkeit eleganter und funktionaler Navigationsmenüs freisetzen, die das Benutzererlebnis verbessern und ihre Kreativität unter Beweis stellen.

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