Este es un tutorial sobre cómo crear la gota pura CSS menú desplegable sin usar Javascript. Me di cuenta sin embargo, que la gente suele usar JavaScript para lograr este efecto. En realidad, hay una manera sencilla de hacerlo sólo con CSS.

Aquí está el ejemplo

Primer paso: creamos una estructura básica de HTML.

  > <Span id = "cabecera">
 <h1> 's Paradise demos para desarrolladores </ h1>
 > <Ul id = "menu">
 <li> <span> Inicio </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Elemento de menú 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Elemento de menú 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> elemento de menú 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Quiénes somos </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Elemento de menú 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Elemento de menú 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> elemento de menú 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Productos </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Elemento de menú 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Elemento de menú 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> elemento de menú 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Segundo paso: Ahora vamos a crear código mágico CSS

  ; padding : 0 ; } *} {Margin: 0; padding: 0;

 body {
 ; de fondo: # 222;
 Arial, Helvetica, sans-serif ; fuente: 100% normal, Arial, Helvetica, sans-serif;
 }

 : #fff ; } h1 {color: # FFF;}

 # Cabecera {
 ; altura: 120px; position: relative;
 ; de fondo: # 333;
 }

 # Menu {
 margen: 0px;
 relleno: 0px;
 position: absolute;
 ; top: 70px;
 display: block;
 }

 # Menu li> {
 list-style-type: none;
 float: left;
 display: block;
 ; margen: 10px 0px;
 position: relative;
 relleno: 10px;
 ancho: 100px;
 }

 ul { # Menu> li: hover ul {
 display: block;
 }

 { # Menu> li: hover {
 ; background-color: # 808080;
 -Moz-border-radius: 10px;
 -Webkit-border-radius: 10px;
 }

 # Menu ul li {
 margen: 0px;
 relleno: 0px;
 display: none;
 }
 # Menu li ul li {
 list-style-type: none;
 ; margen: 10px 0 0 0;
 font-size: 11px;
 }

 # Menu li ul li a {
 display: block;
 ; relleno: 10px 5px;
 ; color: # FFF;
 text-decoration: none;
 font-weight: bold;
 }

 a { # Menu li ul li: hover {un
 ; background-color: # 606060;
 -Moz-border-radius: 5px;
 -Webkit-border-radius: 5px;
 }

 # Li menú span {
 cursor: pointer;
 ; margen: 10px 0px;
 font-weight: bold;
 ; font-size : 11px ; color: # FFF; font-size: 11px;
 } 

Tenga en cuenta que este código no funciona en Internet Explorer 6 (este navegador pobre no sabe lo que significa ul li>).

Estaría muy agradecido si usted podría tener un segundo para ayudar a promocionar mi blog y compartir este enlace con cualquiera de sus sitios de redes favorecida con el enlace de abajo. Aquí hay un enlace a nuestro sitio preferido si desea registrar un nombre de dominio .

Filed under: Css , Tutoriales por admin