HTML imita la función de menú desplegable de navegación de la enciclopedia de Baidu, el código específico es el siguiente:
Demo Figura 1
<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; charset = utf-8/> <title> html+css imitation baidu encyclopedia navegation menú desplegable </title> <link href = css/style.css rel = stylesheet type = text/css/> </head> <body> <div class = encabezado> <div class = top-bar> head content </div> <iv class = naB-bar Class class = Nav-top> <div class = Nav-Content> <Ul class = Nav-Content-Box> <Li class = index en> <Span> <a href =#> HOME href =#> cultivo </a> </li> <li> <a href =#> geografía </a> </li> <li> <a href =#> geografía </a> </li> <li> <a href =#> Historia </a> </li> <li> <a href =#> life </a> </li> <i> <a href =#> <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 =#> Museo digital </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> </li> <li><a href=#>Science Encyclopedia</a></li> </li> </li> <li><a href=javascript:void(0)>Users</a></span> <ul> <li><a href=#>Tailpole Group</a></li> <li><a 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)> cooperación autoritaria </a> </span> <ul> <li> <a href =#> cooperation <li> <a href =#> faq </a> </li> <li> <a href =#> Información de contacto </a> </li> </li> </li> </li> <li> <a href =#> Información de contacto </a> </li> </li> </li> </li> <li class = mobile> <span> <a href = javscript (0) Enciclopedia </a> </span> <ul> <li> <a href =#> cliente </a> </li> <li> <a href =#> versión web </a> </li> </li> </li> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </body </html>estilo
cuerpo {margen: 0; relleno: 0; Font-Family: Arial, Tahoma, 'Microsoft Yahei', '/5b8b/4f53', sans-serif ;;} .Top-bar {Background-Color:#F3F3F3; Text-Align: Center; Padding: 2.5em;} a {relleno-bottom: 3px; color: blanco; text-decoration: none;} ul {list-style: Ninguno; almohadilla: 0; margen: 0;} li {text-align: Center;} .nav-bar {posición: relativo; z-índice: 1000; desbordamiento: oculto; min-width: 900px; altura: 45px;}. Nav-bar: hover {desbordamiento: visible; -webkit-transición: todas las 0.5s facilitados; transición: todos 0.5sss facilidad;}. nav-bg {posición: absoluto; ancho: 100%; altura: 272px; fondo:#24619c; fondo: rgba (36,97,158, .95);-webkit-transition: .3s; transición: .3s; z-index: 9999;}. Nav-top {altura: 43px; border-top: 1px; 1px; #5895D5; Border-Bottom: 1px Solid #3b92e9; fondo:#459df5;}. Nav-contento {posición: absoluto; ancho: 80%; izquierda: 10%;}. Nav-content-box {Position: Absolute; arriba: 0; izquierda: 0; ancho: 1 00%) : bloque; ancho: 100%; margen: 0; altura: 41px; línea de línea: 41px;}. Nav-Content-box> li: hover> span> a {fondo:#338ce6;} ul> li.index, ul> li.cat, ul > li.special, ul> li.user, ul> li.cooperation, ul> li.mobile {ancho: 120px;} ul> li.index {altura: 43px;} ul.nav-content-box> li> ul {border-right: sólido 1px #3a6fa2; margen: 10px 0 6px} ul.nav-content-box> li> ul: después {visibilidad: hidden; display: block; font-size: 0; contenido: ; claro: ambos; altura: 0} .nav-content-box> li: hover> ul {border-right: none; padding-right: 1px;} ul.nav-content-box> li> ul> li {float: izquierda; ancho: 10 0%; línea de línea: 2; text-align: centro;} ul.nav-content-box> li.cat> ul> li {ancho: 49%;} ul.nav-contento-box> li> ul> li> a {display: bloque; ancho: 100%;};} ResumirLo anterior es la función de menú desplegable HTML IMitation Baidu Encyclopedia Navigation de navegación presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!
Si cree que este artículo es útil para usted, reimprima. Por favor, indique la fuente, ¡gracias!