CSS zum Erstellen eines dynamischen sekundären Menüs

Dynamisches Implementieren eines einfachen sekundären Menüs

Wenn die Maus auf das Etikett der ersten Ebene gelegt wird, nimmt die Maus die Form einer kleinen Hand an, um das Menü der zweiten Ebene anzuzeigen. Der Quellcode lautet wie folgt. Sie können ihn kopieren und direkt verwenden.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        * {Rand: 0; Polsterung: 0;}
        ul { Listenstil: keine;}
        div {
            Breite: 100 %;
            Höhe: 50px;
            Hintergrundfarbe: #ccc;
        }
        .Erste {
            Breite: 100px;
            Höhe: 50px;
            schweben: links;
            Rand rechts: 70px;
            /* Hintergrundfarbe: rosa; */
            Cursor: Zeiger;
            Textausrichtung: zentriert;
            Zeilenhöhe: 50px;
            Rahmenradius: 15px;
        }
        .zweites li{
            Breite: 80px;
            Höhe: 50px;
            Hintergrundfarbe: blau;
            Randradius: 50 %;
            Rand oben: 10px;
        }
        .zweite {
            Anzeige: keine;
        }
        .erste:hover .zweite{
            Anzeige: Block;
            Cursor: Zeiger;
        }
        .erster:hover {
            Hintergrundfarbe: rosa;
        }
    </Stil>

<Text>
    <div>
        <ul>
            <li Klasse="Erste">
                <p>Tag der ersten Ebene</p>
                <ul Klasse="zweite">
                    <li>Tags der zweiten Ebene</li>
                    <li>Tags der zweiten Ebene</li>
                </ul>
            </li>

            <li Klasse="Erste">
                <p>Tag der ersten Ebene</p>
                <ul Klasse="zweite">
                    <li>Tags der zweiten Ebene</li>
                    <li>Tags der zweiten Ebene</li>
                </ul>
            </li>
        </ul>
    </div>

</body>
</html>

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierung eines dynamischen Sekundärmenüs mit CSS. Weitere relevante CSS-Inhalte für dynamische Sekundärmenüs finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Deaktivierte Werte, die nicht eingegeben werden können, können nicht an die Aktionsebene übergeben werden

>>: Ein praktischer Bericht über XSS-Angriffe in einem VUE-Projekt

MySQL-Lernaufzeichnung: Blutiger Vorfall durch KEY-Partition verursacht

CSS zum Erstellen eines dynamischen sekundären Menüs

MySQL-Lernaufzeichnung: Blutiger Vorfall durch KEY-Partition verursacht

Beispiele für die Verwendung des Li-Tags in HTML

Beispiele für die Verwendung einer Link-Aktualisierungsseite und einer JS-Aktualisierungsseite

Webdesign-Tipps für Formular-Eingabefelder

Mysql SQL-Anweisungsvorgang zum Hinzufügen oder Ändern des Primärschlüssels

Detaillierte Erläuterung der Implementierungsmethode für die Datenbank-Mehrtabellenverbindungsabfrage

Beispiel für eine Methode zum Festlegen von MySQL-Fremdschlüsseln

Lösung für das Problem, dass die Umleitung der Crontab-Ausgabe unter Linux nicht wirksam wird

Leitfaden zum Schreiben von HTML-Code

Implementierungsschritte für die Docker-Bereitstellung von SpringBoot-Anwendungen

Artikel empfehlen

So lösen Sie das Zeichensatzproblem bei der Anmeldung bei Linux

Automatisches Failover von Slave-Knoten in der Replikationsarchitektur in MySQL 8.0.23

SSH-Portweiterleitung zur Erzielung einer Intranet-Penetration

Detaillierte Erklärung der neuen CSS-Eigenschaft display:box

Implementierung des React Page Turner (inkl. Front- und Backend)

Vergleichstabelle chinesischer und englischer Schriftnamen (einschließlich Founder und Arphic)

Auszeichnungssprachen – Was lernen, nachdem man HTML gelernt hat?

So ändern Sie die Konfiguration von „create-react-app“, ohne „eject“ zu verwenden

Mysql-Sortierung und Paginierung (Order by & Limit) und vorhandene Fallstricke

Reagieren Sie mit Beispielcode zur Implementierung des Anmeldeformulars

Elementui exportiert Daten in XLSX- und Excel-Tabellen

CSS3 realisiert den Effekt der kontinuierlichen Dreiecksvergrößerung

So kapseln Sie die Tabellenkomponente von Vue Element

Ein einfaches Beispiel für die Verwendung von Vue3-Routing VueRouter4

4 Lösungen für CSS-Browserkompatibilitätsprobleme