Wissen Sie, wie man mit reinem CSS einen Dropdown-Menüeffekt erzielt?

Die spezifischen Implementierungsschritte sind wie folgt:

(Empfohlenes Video-Tutorial: css-Video-Tutorial)

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

<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 : für das erste a-Tag: Hover-Selektor; Funktion implementiert: Wenn die Maus über das a-Label bewegt wird, ist der verborgene Teil des Inhalts sichtbar

      *{
            padding: 0;
            margin: 0;
        }

6. Bisher können Sie Ihre eigenen Stile hinzufügen um das Benutzererlebnis zu optimieren

Zum Beispiel:

Horizontal angeordnete Menüleiste:

 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;
        }

Die Maus gleitet über die Spalte, um ihre Position anzuzeigen

.plat{
            display: none;
        }

Ergebnis:

Alle Codes lauten wie folgt:

.nav:hover .plat{
            display: block;
            clear: both;
        }

CSS-Tutorial

Das obige ist der detaillierte Inhalt vonWissen Sie, wie man mit reinem CSS einen Dropdown-Menüeffekt erzielt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!