Tutorial per crear un bell, simple, horitzontal menú CSS |

Tutorial per crear un bell, simple, menú horitzontal CSS

Aquesta és una molt simple, horitzontal css menú. Aquest tutorial ajuda a crear un senzill i atractiu menú CSS amb efecte hover un lloc fresc.

En primer lloc anem a escriure el codi CSS per al menú. aquí va el codi ..

  # Navegació 
  ( 
  padding: 0; 
  ) 

 # Navegació li 
  ( 
  pantalla: "inline"; 
  ) 

  Un # navegació li 
  ( 
  font-family: Arial; 
  font-size: 12px; 
  ; text-decoration: none; 
  flotador: esquerra; 
  padding: 10px; 
  ; background-color: # 333333; 
  ; color: # ffffff; 
  frontera-fons: 1px; 
  ; frontera-bottom-color: # 000000; 
  frontera-bottom-estil: sòlid; 
  ) 

 # Navegació li a: hover 
  ( 
  ; background-color: # 9B1C26; 
  padding-bottom: 12px; 
  frontera-fons: 2px; 
  ; frontera-bottom-color: # 000000; 
  frontera-bottom-estil: sòlid; 
  marge: - 1px; 
  ) 

En segon lloc anem a escriure la llista de menú HTML. Dir que tenim 7 enllaços, com es mostra a la imatge, aquí va el codi ..


  > <ul id = "nav"> 
  > Home </a> </li> <li> <a href = "#"> Inici </ a> </ li> 
  > About </a> </li> <li> <a href = "#"> Sobre </ a> </ li> 
  > Services </a> </li> <li> <a href = "#"> Serveis </ a> </ li> 
  > Products </a> </li> <li> <a href = "#"> Productes </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Mapa del lloc </ a> </ li> 
  > Help </a> </li> <li> <a href = "#"> Ajuda </ a> </ li> 
  > Contact Us </a> </li> <li> <a href = "#"> Contacte </ a> </ li> 
  </ Ul>