HTML Imitation Baidu Encyclopedia Navigation Fonction de menu déroulant

Auteur：Eve Cole Date de mise à jour：2025-04-14 14:16:01

HTML imite la fonction de menu déroulant Baidu Encyclopedia Navigation, le code spécifique est le suivant:

Démo Figure 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> <adread> <meta http-equiv = content-type content = text / html; Charset = UTF-8 /> <Title> HTML + CSS IMITATION BAIDU ENCYCLOPEDIA NAVIGATION Menu déroulant </TITLE> <Link Href = CSS / Style.css Rel = Stylesheet Type = Text / CSS / CSS class = nav-top> <div class = nav-content> <ul class = nav-content-box> <li class = index on> <span> <a href = #> home </a> </span> </li> <li class = cat> <span> <a href = #> classification </a> </pan> <ul> <li> <a href = #> nature </a> href = #> Culture </a> </li> <li> <a href = #> Géographie </a> </li> <li> <a href = #> Géographie </a> </li> <li> <a href = #> History </a> </li> <li> <a href = #> life </a> </li> <li> <li> <a href = #> art </a> </li> <li> <a href = #> Les gens </a> </li> <li> <a href = #> économique </a> </li> <li> <a href = #> Technology </a> </li> <li> <a href = #> Sports </a> </li> </li> </ li> <li> <a <a <a <a sports </a> </li> </ li> href = #> sports </a> </li> </li> </li> <li> <a href = #> sports </a> </li> </li> <li> <a href = javascrip href = #> Musée numérique </a> </li> <li> <a href = #> href = #> City Encyclopedia </a> </li> <li> <a href = #> Encyclopedia universitaire </a> </li> <li> <a href = #> art encyclopedia </a> Encyclopédie </a> </li> </li> </li> <li> <a href = #> ENCYCLOPEDIA SCIENCE </a> </li> </li> </li> <li> <a href = javascript: void (0)> utilisateurs </a> </pan> <ul> <li> <a href = #> href = #> Dream Burning Plan </a> </li> <li> <a href = #> tâche Encyclopedia </a> </li> <li> <a href = #> Encyclopedia Mall </a> </li> </li> </li> <li class = coopération> <spandé> </li> <li class = coopération> <span> <a href = #> Encyclopedia Mall </a> </li> </li> </li> <li class = coopération> <span> <a href = javascrip <li> <a href = #> faq </a> </li> <li> <a href = #> coordonnées </a> </li> </li> </li> </li> <li> <a href = #> coordonnées </a> </li> </li> </li> </li> <li class = mobile> <pan> <a href = javascrip Encyclopedia </a> </span> <ul> <li> <a href = #> client </a> </li> <li> <a href = #> version Web </a> </li> </li> </li> </li> </ul> </div> </div> </v> </v> </div> </v> </v>

style

 Corps {marge: 0; rembourrage: 0; Font-Family: Arial, Tahoma, 'Microsoft Yahei', '/ 5b8b / 4f53', Sans-Serif ;;} .TOP-BAR {Background-Color: # F3F3F3; Text-Align: Center; Padding: 2.5EM;} A {Padding-Bottom: 3px; Color: White; Text-Decoration: Aucun;} Ul {Style de liste: Aucun; Padding: 0; Margin: 0;} Li {Text-Align: Center;} .nav-bar {position: relatif; z-index: 1000; overflow: caché; min-large: 900px; hauteur: 45px;}. Nav-bar: hover {overflow: visible; -webkit-transition: toutes les 0,5s facilite; transition: tous les 0,5s; facilité;}. Nav-bg {position: absolue; largeur: 100%; hauteur: 272px; arrière-plan: # 24619C; arrière-plan: RGBA (36,97,158, .95); - webkit-transition: .3s; transition: .3s; z-index: 9999;}. # 5895D5; Border-Bottom: 1px solide # 3B92E9; arrière-plan: # 459df5;}. NAV-CONTENT {Position: Absolute; Width: 80%; Left: 10%;}. Nav-Content-Box {Position: Absolute; Top: 0; Left: 0; largeur: 1 00%;}. NAV-CONTEN-BOX> li {float: Left; line-height: 43px;}. NAV-CONTENT-BOX> li: hover {background: # 19508b;}. NAV-CONTENT-Box> li> span> a {affiche : Block; largeur: 100%; marge: 0; hauteur: 41px; line-height: 41px;}. NAV-Content-box> li: hover> span> a {background: # 338ce6;} ul> li.index, ul> li.cat, ul > li.special, ul> li.user, ul> li.coopération, ul> li.mobile {width: 120px;} ul> li.index {height: 43px;} ul.nav-content-box> li> ul {border-right: solide: solide 1px # 3A6FA2; marge: 10px 0 6px} ul.nav-content-box> li> ul: après {visibilité: caché; affichage: bloc; police-taille: 0; contenu: ; Clear: à la fois; hauteur: 0} .nav-content-box> li: hover> ul {border-right: nother; padding-right: 1px;} ul.nav-content-box> li> ul> li {float: gauche; largeur: 10 0%; Line-Height: 2; Text-Align: Center;} ul.nav-content-box> li.cat> ul> li {width: 49%;} ul.nav-content-box> li> ul> li> a {display: block; width: 100%;}

Résumer

Ce qui précède est la fonction de menu déroule de navigation HTML Imitation Baidu Encyclopedia de navigation présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!

Si vous pensez que cet article vous est utile, veuillez le réimprimer. Veuillez indiquer la source, merci!