HTML Imitation Baidu Encyclopedia Navigation Dropdown-Menüfunktion

Autor：Eve Cole Aktualisierungszeit：2025-04-14 14:16:01

HTML imitiert die Dropdown-Menü der Baidu Encyclopedia Navigation, der spezifische Code lautet wie folgt:

Demo Abbildung 1

 <! DocType html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><Html xmlns = http: //www.w3.org/1999/xhtml> <kopf> <meta http-equiv = content-type content = text/html; charset=utf-8 /><title>html+CSS imitation Baidu Encyclopedia Navigation drop-down menu</title><link href=css/style.css rel=stylesheet type=text/css /></head><body><div class=header> <div class=top-bar> Head content</div> <div class=nav-bar> <div class=nav-bg> <div class = nav-top> <div class = nav-content> <ul class = nav-content-box> <li class = index auf> <span> <a href =#> home </a> </span> </li> <li class = cat> <span> <a href =#> klassifizierung </a> <li> <li> <a href =## href=#>Culture</a></li> <li><a href=#>Geography</a></li> <li><a href=#>Geography</a></li> <li><a href=#>History</a></li> <li><a href=#>Life</a></li> <li><a href=#>Society</a></li> <li><a href=#>Art</a></li> <li><a href=#>People</a></li> <li><a href=#>Economic</a></li> <li><a href=#>Technology</a></li> <li><a href=#>Sports</a></li> </li> </li> <li><a href=#>Sports</a></li> </li> </li> <li><a href=#>Sports</a></li> </li> <li><a href=javascript:void(0)>Featured Encyclopedia</a></span> <ul> <li><a href=#>Today in History</a></li> <li><a href=#>Digital Museum</a></li> <li><a href=#> href=#>City Encyclopedia</a></li> <li><a href=#>University Encyclopedia</a></li> <li><a href=#>Art Encyclopedia</a></li> <li><a href=#>Science Encyclopedia </a> </li> </li> </li> <li> <a href =#> Science Encyclopedia </a> </li> </li> </li> <li> <a href = javaScript: void (0)> aa> <ul> <li> <a href =############## href=#>Dream Burning Plan</a></li> <li><a href=#>Encyclopedia Task</a></li> <li><a href=#>Encyclopedia Mall</a></li> </li> </li> <li class=cooperation> <span><a href=#>Encyclopedia Mall</a></li> </li> </li> <li class=cooperation> <span><a href=#>Encyclopedia Mall</a></li> </li> </li> <li class=cooperation> <span><a href=javascript:void(0)>authoritative cooperation</a></span> <ul> <li><a href=#>Cooperation model</a></li> <li> <a href =#> FAQ </a> </li> <li> <a href =#> Kontaktinformationen </a> </li> </li> </li> </li> <li> <a href =#> Kontaktinformationen </a> </li> </li> </li> <) mobile = mobile = mobile> <span> <a hreef = javascrikt: Encyclopedia</a></span> <ul> <li><a href=#>Client</a></li> <li><a href=#>Web version</a></li> </li> </li> </li> </ul> </div> </div> </div> </div> </div> </div></div></body></html>

Stil

 Körper {Rand: 0; Polster: 0; Schriftfamilie: Arial, Tahoma, 'Microsoft Yahei', '/5b8b/4f53', sans-serif ;;} .Top-Bar {Hintergrundfarbe:#f3f3f3; Text-Align: Mitte; Padding: 2.5EM; .nav-bar {Position: relativ; Z-Index: 1000; Überlauf: Hidden; Min-Width: 900px; Höhe: 45px;}. Navigation: Hover {Überlauf: sichtbar; Leichtigkeit;}. nav-bg {Position: absolut; Breite: 100%; Höhe: 272px; Hintergrund:#24619c; Hintergrund: RGBA (36,97,158, .95); #5895d5; Border-Bottom: 1PX Solid #3b92e9; Hintergrund:#459df5;}. Nav-In-In-Konzent {Position: absolut; Breite: 80%; links: 10%;}. Nav-In-Konzent-Box {Position: absolut; ober: 0; links: 0; Breite: 1 00%;}. Nav-content-box> li {float: links; Zeilenhöhe: 43px;}. Nav-content-box> li: hover {Hintergrund:#19508b;}. Nav-content-box> li> span> a {display : Block; Breite: 100%; Rand: 0; Höhe: 41px; Linienhöhe: 41px;}. Nav-In-In-Konzent-Box> Li: Hover> Span> A {Hintergrund:#338ce6;} ul> li.index, ul> li.cat, ul > li.special, ul> li.User, ul> li.cooperation, ul> li.mobile {width: 120px;} ul> li.index {Höhe: 43px;} ul.nav-content-box> li> ul {Border-Right: Solid 1px #3a6fa2; Margin: 10px 0 6px} ul.nav-content-box> li> ul: After {Sichtbarkeit: versteckt; Anzeige: Block; Schriftgröße: 0; Inhalt: ; klar: beide; Höhe: 0} .nav-content-box> li: hover> ul {border-right: keine; padding-right: 1px;} ul.nav-content-box> li> ul> li {float: links; Breite: 10 0%; Zeilenhöhe: 2; Text-Align: Mitte;} ul.nav-content-box> li.cat> ul> li {width: 49%;} ul.nav-content-box> li> ul> li> a {display: block; width: 100%;}

Zusammenfassen

Das obige ist die vom Editor vorgestellte HTML-Imitation Baidu Encyclopedia Navigation Menüfunktion. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!

Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, drucken Sie ihn bitte nach. Bitte geben Sie die Quelle an, danke!