Reiner CSS-Code, um einen einfachen Dropdown-Menüeffekt zu erzielen

Implementierungsmethode:

(Empfohlenes Tutorial: CSS-Tutorial)

1. Verwenden Sie ul- und li-Tags, um eine Assoziationsstruktur zu schreiben (die Eltern-Kind-Beziehung zwischen ul und li ist natürlich und wird in verwendet allgemeine Assoziationsstrukturen)

<ul class="nav">
    <a href="#">服装</a>
    <ul class="plat">
        <li><a href="#">衬衫</a></li>
        <li><a href="#">棉袄</a></li>
        <li><a href="#">裤衩</a></li>
    </ul>
</ul>

2. Initialisieren Sie die Benutzeroberfläche (ein einheitlicher Start)

      *{
            padding: 0;
            margin: 0;
        }

3. Fügen Sie der UL Stile und Tags hinzu (Sie können hier frei spielen). Inhalt des .plat-Teils

 ul,a{
            font-size: 20px;
            list-style: none;
            text-decoration: none;
            background-color: #3C3C3C;
            color: #FFFFFF;
            width: 100px;
            text-align: center;
            border: 0px solid black;
            border-radius: 5px;  /*圆角*/
            margin-top: 1px;
        }
        a{
            display: block;
        }

5. (Hier kommt die Hervorhebung) Verwendung: Bewegen Sie den Mauszeiger über den ersten Tag, um die Funktion zu erkennen: Wenn sich die Maus über den Tag bewegt, wird der verborgene Teil des Inhalts sichtbar

6. Bisher wurde die Funktion implementiert. Sie können Ihre eigenen Stile hinzufügen, um das Benutzererlebnis zu optimieren :

(Lernvideo-Empfehlung:

CSS-Video-Tutorial

)

Alle Codes:

.plat{
            display: none;
        }

Das obige ist der detaillierte Inhalt vonReiner CSS-Code, um einen einfachen Dropdown-Menüeffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!