Tutorial para crear un hermoso, simple, horizontal menú CSS |

Tutorial para crear un hermoso, simple, menú horizontal CSS

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

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

  # navegación 
  ( 
  padding: 0; 
  ) 

  # navegación li 
  ( 
  pantalla: "inline"; 
  ) 

  # navegación li un 
  ( 
  font-family: Arial; 
  font-size: 12px; 
  ; text-decoration: none; 
  flotador: izquierda; 
  padding: 10px; 
  ; background-color: # 333333; 
  ; color: # ffffff; 
  frontera-fondo: 1px; 
  ; frontera-bottom-color: # 000000; 
  frontera-bottom-estilo: sólido; 
  ) 

 # navegación li a: hover 
  ( 
  ; background-color: # 9B1C26; 
  padding-bottom: 12px; 
  frontera-fondo: 2px; 
  ; frontera-bottom-color: # 000000; 
  frontera-bottom-estilo: sólido; 
  margen: - 1px; 
  ) 

En segundo lugar vamos a escribir la lista de menú HTML. Decir que tenemos 7 enlaces, como se muestra en la imagen, aquí va el código ..


 > <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Products </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Help </a> </li> <li> <a href = "#" > Contact Us </a> </li> </ul> <ul id = "nav"> <li> <a "#" href => Inicio </ a> </ li> <li> <a href = "#"> Acerca de </ a> </ li> <li > <a href = "#"> Servicios </ a> </ li> <li> <a href = "#"> Productos </ a> </ li> <li> <a href = "#"> Mapa del sitio </ a> </ li> <li> <a href = "#"> Ayuda </ a> </ li> <li> <a href = "#"> Contacto </ a> </ li> < / ul>