Heim > Artikel > Web-Frontend > So implementieren Sie mit CSS3 ein Navigations-Dropdown-Menü (vollständiger Code im Anhang)
In der aktuellen Webseitenstruktur nimmt die Navigationsmenüleiste eine sehr wichtige Position ein, da sie nicht nur Beispiele anzeigen kann, sondern Ihnen auch den intuitivsten Eindruck vom Inhalt vermittelt. Wie wir alle wissen, ist in HTML
Das Prinzip der Verwendung von CSS3 zum Implementieren des Navigations-Dropdown-Menüs
Verwenden Sie zunächst das
Schritte zur Verwendung von CSS3 zum Implementieren des Navigations-Dropdown-Menüs
Schritt 1: Verwenden Sie HTML, um einen Menüstil zu erstellen
<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></li> <li><a href="#">导航三</a> <ul> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></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></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> </ul> </li> <li><a href="#">导航六</a></li> </ul> </nav>
Schritt 2: Verwenden Sie CSS3, um ein Drop-Down-Menü zu implementieren, das per Mauszeiger ausgelöst wird
nav { margin:100px auto; text-align:center; } nav ul { border-radius:10px; background:linear-gradient(to bottom,#efefef,#bbbbbb); padding:0 20px; display:inline-table; position:relative; box-shadow:1px 1px 3px #666; } nav ul ul { display:none; } nav ul li { float:left; } nav ul::after { content:""; display:block; clear:both; } nav ul li a { display:block; padding:25px 40px; color:#000; text-decoration:none; font-family:"微软雅黑"; } nav ul li:hover > ul { display:block; } nav ul li:hover { background:linear-gradient(to bottom,#4f5964,#5f6975); } nav ul li:hover a { color:#FFF; } nav ul ul { background:#5f6975; border-radius:0; position:absolute; top:100%; padding:0; } nav ul ul li { float:none; border-top:1px solid #6b727c; border-bottom:1px solid #575f6a; } nav ul ul li a { color:#FFF; } nav ul ul li a:hover { background:#4b545f; } nav ul ul ul { width:100%; position:absolute; left:100%; top:50%; }
Schritt 3: Verschönern Sie es entsprechend die Anforderungen des Menüstils
Der Dropdown-Menüstil ist wie im Bild gezeigt
Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit CSS3 ein Navigations-Dropdown-Menü (vollständiger Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!