Menú simple verticale Tutorial, CSS, Tutoriales

Menú simple verticale Tutorial

Esta es una muy simple, verticale css menú. Este tutorial ayuda a crear un sencillo y atractivo menú CSS con efecto hover un lugar fresco.

Paso: 1

En primer lugar vamos a escribir el código CSS para el menú. aquí va el código ..


  # navegación (ul 
  margin: 0; 
  padding: 0; 
  lista-estilo-tipo: ninguno; 
  ) 


  # navegación ul li ( 
  ; /*IE 6*/ pantalla: "inline"; / * IE 6 * / 
  ) 


  # navegación ul li a ( 
  pantalla: bloque; 
  ; de fondo: # d9d9d9; 
  ancho: 200px; 
  text-decoration: none; 
  7px /*padding for left, right*/ ; padding: 4px / * para el relleno superior, inferior * / 7px / * para el relleno de la izquierda, derecha * /; 
  #eeeeee ; frontera-fondo: sólido 1px # eeeeee; 
  #cccccc ; frontera-superior: sólido 1px # cccccc; 
  # 333333 ; border-left: 5px sólido # 333333; 
  ; color: # 333333; 


  { # navegación ul li a: hover ( 
  ; border-left-color: # 0099FF; 
  ; color: # 0066FF; 
  ; de fondo: # c4c4c4; 
  )

Paso: 2

Ahora vamos a crear una estructura básica en HTML.


  > <div id = "nav"> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Inicio </ a> </ li> 
  > About Us </a> </li> <li> <a href = "#"> Acerca de nosotros </ a> </ li> 
  > Services </a> </li> <li> <a href = "#"> Servicios </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Mapa del sitio </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Contacto </ a> </ li> 
  </ Ul> 
  </ div>