HTML imita a função de menu suspenso de navegação da Enciclopédia Baidu, o código específico é o seguinte:
Demo Figura 1
<! Doctype html public -// w3c // dtd xhtml 1.0 transitório // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <title> html+imitação css baidu enciclopédia navegação menu suspenso </title> <link href = css/style.css rel = stylesheet type = text/css/> </head> <body> <clássia = nav> clássia <d class = class> thext> head css/> class = Nav-top> <div class = nav-content> <ul class = nav-content-box> <li class = índice em> <pan> <a href =#> home </a> </span> </li> <li class = cat> <li> nature> <a href =#> classificação </a> </span> <ul> <li> href =#> cultura </a> </li> <li> <a href =#> geografia </a> </li> <li> <a href =#> geografia </a> </li> <li> <a href =#> histórico </a> </li> <a> hres =#> </a> <li> <a href =#> art </a> </li> <li> <a href =#> pessoas </a> </li> <li> <a href =#> econômico </a> </li> <li> <a href = #> Tecnologia </a> </li> <li> <a> <li> <a href =#> href =#> esportes </a> </li> </li> </li> <li> <a href =#> esportes </a> </li> </li> <li> <a href = javascript: void (0)> em destaque =############href = Href =#> Museu Digital </a> </li> <li> <a href =#> href =#> City Encyclopedia </a> </li> <li> <a href =#> universidade <byclopedia </a> </li> <a href => <byclopedia </a> Encyclopedia </a> </li> </li> </li> <li> <a href =#> Enciclopédia científica </a> </li> </li> </li> <li> <a href = javascript: void (0)> users> </a> </span> <ul> <li> HREF =#> Plano de queima de sonhos </a> </li> <li> <a href =#> Tarefa de Encyclopedia </a> </li> <li> <a href =#> Encyclopedia Mall </a> </li> </li> </li Class = Cooperation> <plan> <ahref =#> </li> <li class = cooperação> <mpan> <a href =#> Encyclopedia Mall </a> </li> </li> </li> <li class = cooperação> <pan> <a href = javascript: void (0)> Autoritativo de cooperação </a> </span> <li> <li> href =#> faq </a> </li> <li> <a href =#> informações de contato </a> </li> </li> </li> </li> <li> <a href =#> informações de contato </a> </li> </li> </li> </li> <li class = mobile> <span> <a> <a> </hf hf hf </li> </li> </li> <li clems = mobile> <span> <a> <a> hf hf hf hf hf hf hf hf hf hf hf hf hf hf hf hf hf hf hf hf hf (/jre) </li> </liercr:#> Encyclopedia </a> </span> <ul> <li> <a href =#> cliente </a> </li> <li> <a href =#> versão da web </a> </li> </li> </li> </li> </ul>estilo
corpo {margem: 0; preenchimento: 0; font-family: Arial, Tahoma, 'Microsoft yahei', '/5b8b/4f53', sans-serif ;;} .top-bar {color de fundo:#f3f3f3; text-align: Center; preenchimento: 2.5em;} a {acolchoado-garoto: 3px; cor: branco; decoração de texto: nenhum;} ul {list-estilo: nenhum; estofamento: 0; margem: 0;} li {text-alinhe:} .nav-bar {posição: relativa; z-índice: 1000; transbordamento: hidden; min-lar: 900px; altura: 45px;}. Nav-bar: hover {Overflow: visível; -webkit-transição: todas as 0,5s de uma ease; transição: 0.5s facilidade;}. Nav-bg {posição: absoluto; largura: 100%; altura: 272px; fundo:#24619C; Antecedentes: rgba (36,97,158, .95);-webkit-transição: .3s; transição: .3s; z-Index: 9999;}. Navoptop {altura; #5895D5; fundo de borda: 1px sólido #3B92E9; Antecedentes:#459DF5;}. Nav-Content {Posição: Absoluto; Largura: 80%; Esquerda: 10%;}. Nav-Content-Box {Posição: Absolute; topo: 0; esquerda: 0; largura: 1 00%;}. Nav-content-box> li {float: esquerda; altura da linha: 43px;}. Nav-content-box> li: hover {Background:#19508b;}. Nav-content-box> li> span> a {display : Bloco; largura: 100%; margem: 0; altura: 41px; altura da linha: 41px;}. Nav-content-box> li: hover> span> a {background:#338ce6;} ul> li.index, ul> li.cat, ul > li.special, ul> li.User, Ul> li.cooperação, Ul> li.mobile {width: 120px;} ul> li.index {altura: 43px;} ul.nav-content-box> li> ul {borda-right: sólido 1px #3a6fa2; margem: 10px 0 6px} ul.nav-content-box> li> ul: após {visibilidade: hidden; display: block; font-size: 0; content: ; claro: ambos; altura: 0} .nav-content-box> li: hover> ul {borda-direita: nenhum; preenchimento-direito: 1px;} ul.nav-content-box> li> ul> li {float: esquerda; largura: 10 0%; altura da linha: 2; Alinhamento de texto: Centro;} Ul.nav-content-box> li.cat> ul> li {width: 49%;} ul.nav-content-box> li >l> li> a {display: Block; largura: 100%;} ResumirO exposto acima está a função suspensa do menu suspenso da imitação de imitação HTML Baidu, introduzida pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!
Se você acha que este artigo é útil para você, reimprimi -lo. Por favor, indique a fonte, obrigado!