Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Tutorial zur Implementierung eines Dropdown-Menüs mit reinem CSS

小云云
Freigeben: 2018-01-11 10:15:29
Original
1578 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode für die Implementierung eines Dropdown-Menüs in reinem CSS vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Setzen Sie die UL-Höhe des Dropdown-Menüs auf 0 und blenden Sie den überschüssigen Teil aus.

Stellen Sie die Höhe des Dropdown-Menüs ein, um einen Übergangseffekt hinzuzufügen. Wenn die Höhe automatisch ist, ist der Übergangseffekt ungültig.


<style>
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul li a{
        display: block;
        text-decoration: none;
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: white;
        background-color: #2f3e45;
    }
    .drop-down{
        width: 100px;
        height: 50px;
    }
    .drop-down-content{
        opacity: 0;
        height: 0;
        overflow: hidden;
        transition: all 1s ease;
    }

    p{
        font-size: 20px;
        margin: 0;
    }
    .drop-down-content li:hover a{
        background-color: red;
    }
    .nav .drop-down:hover .drop-down-content{
        opacity: 1;
        height: 150px;
    }
</style>
<ul class="nav">
    <li class="drop-down">
        <a href="#">下拉菜单</a>
        <ul class="drop-down-content">
            <li><a href="#">菜单1</a></li>
            <li><a href="#">菜单2</a></li>
            <li><a href="#">菜单3</a></li>
        </ul>
    </li>
</ul>
<p>内容</p>
Nach dem Login kopieren

Die Darstellung ist wie folgt:



Verwandte Empfehlungen:

JQuery-Implementierung der Dropdown-Menü-Methodenfreigabe

So verwenden Sie die benutzerdefinierten Anweisungen von Vue, um ein Dropdown-Menü zu vervollständigen

Schritte zum Implementieren eines animierten Dropdown-Menüeffekts mit CSS3

Das obige ist der detaillierte Inhalt vonTutorial zur Implementierung eines Dropdown-Menüs mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage