Heim > Artikel > Web-Frontend > So schreiben Sie ein sekundäres Dropdown-Menü in CSS

So schreiben Sie ein sekundäres Dropdown-Menü in CSS

藏色散人Original: 2021-01-04 09:27:203931Durchsuche

So schreiben Sie ein sekundäres Dropdown-Menü in CSS: Erstellen Sie zunächst eine HTML-Beispieldatei. Verwenden Sie dann das Anzeigeattribut von CSS, um zu steuern, ob das sekundäre Dropdown-Menü angezeigt wird oder nicht Browser.

Die Betriebsumgebung dieses Tutorials: Dell G3-Computer, Windows 7-System, Chrome76.0 und CSS3-Version.

Empfohlen: „CSS-Video-Tutorial“

Reines CSS zum Implementieren eines sekundären Navigations-Dropdown-Menüs

Idee:

Verwenden Sie das Anzeigeattribut von CSS, um zu steuern, ob das sekundäre Dropdown-Menü angezeigt wird oder nicht. Wenn sich die Maus zum li-Tag des Navigationsmenüs der ersten Ebene bewegt, wird das ul-Tag des Navigationsmenüs der zweiten Ebene angezeigt. Da die Implementierung relativ einfach ist, wird der Referenzcode hier direkt angegeben.

Reiner CSS-Dropdown-Menücode für die sekundäre Navigation

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="content-type">
    <title>纯css二级导航下拉菜单</title>
    <meta name="keyword" content="关键字">
    <meta name="description" content="描述">
    <style type="text/css">
        *{margin: 0;padding: 0;}
        #bg{background: red;width: 100%;height: 35px;}
        nav{height: 35px;width: 1000px;margin: 0 auto;}
        nav ul li{list-style-type:none;float: left}
        nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;
        text-align: center;color:white;font-fimily:微软雅黑;}
        nav ul li ul li{float: none}
        nav ul li ul li a{color:black}
        nav ul li ul{display: none;}
        nav ul li:hover ul{display: block;}
    </style>
</head>
<body>
<div id="bg">
<nav>
    <ul>
        <li><a href="#">一级导航</a>
        <ul>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
        </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
    </ul>
</nav>
</div>
</body>
</html>

Bedieneffekt:

So schreiben Sie ein sekundäres Dropdown-Menü in CSS

Das obige ist der detaillierte Inhalt vonSo schreiben Sie ein sekundäres Dropdown-Menü in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Einführung in die allgemeinen Eigenschaften des CSS-Rasterlayouts (Gitter)Nächster Artikel：Einführung in die allgemeinen Eigenschaften des CSS-Rasterlayouts (Gitter)

In Verbindung stehende Artikel

Mehr sehen