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

Der Prozess des Aufbaus einer Lampenarchitektur durch einen Docker-Container

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

Der Prozess des Aufbaus einer Lampenarchitektur durch einen Docker-Container

So erhalten und verwenden Sie die Zeit im Linux-System

Beispiel für die Konfiguration mehrerer SSL-Zertifikate für eine einzelne Nginx-IP-Adresse

MySQL-Batch löschen großer Datenmengen

Zehn wichtige Fragen zum Erlernen der Grundlagen von Javascript

Verwendung von benutzerdefinierten Nginx-Variablen und integrierten vordefinierten Variablen

Beispielcode zur Implementierung von Dreiecken und Pfeilen durch CSS-Rahmen

Docker führt einen Befehl in einem Container außerhalb des Containers aus

Detaillierte Erklärung der reinen SQL-Anweisungsmethode basierend auf JPQL

Analyse des Parameterübertragungsprozesses des Treibermoduls in Linux

Artikel empfehlen

Eine kurze Erläuterung, wie Tomcat den übergeordneten Delegationsmechanismus unterbricht

So versuchen Sie, Ihrem CSS einen Sticky-Effekt hinzuzufügen

Grundlegende Schritte zur Sicherheitseinstellung für den CentOS7-Server

mysql5.7.21 UTF8-Kodierungsproblem und -Lösung in der Mac-Umgebung

Grafisches Tutorial zur Installation und Konfiguration der MySQL 5.7.17 Winx64-Dekomprimierungsversion

Vorgehensweise bei der Installation einer virtuellen VMware Workstation-Maschine

Das Raster ist Ihr Layoutplan für die Seite

Einführung in Container-Datenvolumes in Docker

JavaScript-Singleton-Modus zum Implementieren benutzerdefinierter Popup-Fenster

Beispiel für die Bereitstellung einer Laravel-Anwendung mit Docker

Lösung für das Timeout-Problem der SNMP4J-Serververbindung

JavaScript-Plugin-Kapselung für Tabellenwechsel

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit vue3 ein Brick-Breaking-Spiel entwickeln

Warum wird für die Webseitenkodierung UTF-8 statt GBK oder GB2312 verwendet?

Eine kurze Erläuterung des Sperrbereichs der MySQL-Next-Key-Sperre