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

(Lernvideo-Empfehlung:

)

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!