So implementieren Sie ein Hover-Dropdown-Menü mit CSS

Wie üblich werde ich heute über einen sehr praktischen CSS-Effekt sprechen: Wenn die Maus auf die Schaltfläche bewegt wird, wird automatisch ein Dropdown-Menü angezeigt. Die Wirkung ist wie folgt:

Bitte fügen Sie eine Beschreibung des Bildes hinzu

Eine sehr einfache Demo. Die Implementierungsschritte sind wie folgt:

Definieren Sie zunächst ein großes Div, um eine Schaltfläche und eine Linkgruppe zu umschließen, und legen Sie die Stile der beiden Elemente unter dem Div fest. eine Verbindungsgruppe wird ausgeblendet, um den Hover-Effekt jedes Teils einzustellen. Beachten Sie hier

/* Hover-Effekt von .dropdown, der auf .dropdown-content einwirkt*/
      .dropdown:hover .dropdown-inhalt {
          Anzeige: Block;
      }

Hängen Sie abschließend den Quellcode an:

<!DOCTYPE html>
<html>

<Kopf>
    <title>Dropdown-Menü-Beispiel</title>
    <meta charset="utf-8">
    <Stil>
        Körper {
            Rand: automatisch;
        }
        
        .dropbtn {
            Hintergrundfarbe: #4CAF50;
            Farbe: #fff;
            Polsterung: 16px;
            Schriftgröße: 16px;
            Rand: keiner;
            Cursor: Zeiger;
        }
        
        .runterfallen {
            links: 47%;
            /* Deklariere es als relative Positionierung, die folgenden Unterelemente können auf dieses Element verweisen*/
            Position: relativ;
            Anzeige: Inline-Block;
        }
        
        .dropdown-inhalt {
            /* Element ausblenden */
            Anzeige: keine;
            Position: absolut;
            Hintergrundfarbe: #f9f9f9;
            Mindestbreite: 160px;
            Kastenschatten: 0px 8px 16px 0px rgba (0, 0, 0, 0,2);
        }
        
        .dropdown-content a {
            Farbe: Schwarz;
            Polsterung: 12px 16px;
            Textdekoration: keine;
            Anzeige: Block;
        }
        
        .dropdown-content a:hover {
            Hintergrundfarbe: #f1f1f1
        }
        
        /* Hover-Effekt von .dropdown, der auf .dropdown-content einwirkt*/
        .dropdown:hover .dropdown-inhalt {
            Anzeige: Block;
        }
        
        .dropdown:hover .dropbtn {
            Hintergrundfarbe: #3dc741;
        }
    </Stil>
</Kopf>

<Text>

    <h2 style="text-align: center;">Dropdown-Menü</h2>
    <p style="text-align: center;">Bewegen Sie die Maus über die Schaltfläche, um das Dropdown-Menü zu öffnen</p>

    <div Klasse="Dropdown">
        <button class="dropbtn">Dropdown-Menü</button>
        <div Klasse="Dropdown-Inhalt">
            <a href="#" target="_block">Hallo Welt 1</a>
            <a href="#" target="_block">Hallo Welt 2</a>
            <a href="#" target="_block">Hallo Welt 3</a>
        </div>
    </div>

</body>

</html>

Dies ist das Ende dieses Artikels über die Implementierung des Hover-Dropdown-Menüs mit CSS. Weitere relevante CSS-Inhalte zum Hover-Dropdown-Menü finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Drei Möglichkeiten zum Erstellen eines Graueffekts auf Website-Bildern

>>: Unterschied zwischen varchar- und char-Typen in MySQL

Detaillierte Erklärung der Komponentenkommunikation in React

So implementieren Sie ein Hover-Dropdown-Menü mit CSS

Detaillierte Erklärung der Komponentenkommunikation in React

Zusammenfassung der Browserkompatibilität gängiger CSS-Eigenschaften (empfohlen)

So starten und stoppen Sie das Shell-Skript zur Bereitstellung eines SpringBoot-JAR-Programms unter Linux

Detaillierte Erläuterung der Laderegeln der require-Methode in node.js

CSS-Menüschaltflächenanimation

So stellen Sie ein SpringCloud-Projekt mit Docker bereit

Sind die Wertebereiche von int(3) und int(10) in MySQL gleich?

So setzen Sie das MySQL-Root-Passwort unter Windows zurück

Nginx-Beispielcode zur Implementierung dynamischer und statischer Trennung

Beispielcode zur Implementierung sechseckiger Rahmen mit CSS3

Artikel empfehlen

Grafisches Tutorial zur kostenlosen Installationsversion von MySQL 5.7.17 winx64

Lösung für die geringe Schreibeffizienz von unter AIX gemountetem NFS

Detaillierte Schritte zum Erstellen eines Dateiservers in Windows Server 2012

Ausführliches Tutorial zur Installation von Deepin in VMware15 (Bild und Text)

Eine kurze Diskussion über die Verwendung der Web Storage API

Vue implementiert eine einfache Slider-Verifizierung

Der Unterschied zwischen JS-Pre-Parsing und Variablen-Promotion im Web-Interview

Detaillierte Erläuterung des Problems der gemischten Verwendung von Limit- und Summenfunktionen in MySQL

So implementieren Sie die King of Glory-Personal-Ladeseite mit CSS3

Axios storniert Anfragen und vermeidet doppelte Anfragen

Zeilen- und spaltenübergreifende Operationen in HTML-Tabellen (Rowspan, Colspan)

So gehen Sie mit Zeitzonenproblemen in Docker um

Implementierung einer Lösung für adaptive Textbereichshöhe in Vue

Tutorial zur HTML-Tabellenauszeichnung (28): Farbattribut für Zellrahmen BORDERCOLOR

jQuery implementiert Navigationsleisteneffekt mit Erweiterungsanimation