Tutorial para crear un bonito, simples, menú horizontal CSS |

Tutorial para crear un bonito, simples, menú horizontal CSS

Isto é moi simple, css menú horizontal. Este tutorial axuda a crear un menú CSS sinxelo e atractivo cunha fria hover efecto.

Primeiro de todo imos escribir código CSS para o menú. aquí vai o código ..

  # Nav 
  ( 
  padding: 0; 
  ) 

  # Nav li 
  ( 
  display: inline; 
  ) 

  # Nav li un 
  ( 
  font-family: Arial; 
  font-size: 12px; 
  ; text-decoration: none; 
  float: left; 
  padding: 10px; 
  ; background-color: # 333333; 
  ; color: # ffffff; 
  borda-bottom: 1px; 
  ; borda-bottom-color: # 000000; 
  borda-bottom-style: solid; 
  ) 

  # Nav li a: hover 
  ( 
  ; background-color: # 9B1C26; 
  padding-bottom: 12px; 
  borda-bottom: 2px; 
  ; borda-bottom-color: # 000000; 
  borda-bottom-style: solid; 
  margin: - 1px; 
  ) 

En segundo lugar imos escribir HTML lista de menú. Digamos que temos 7 conexións, como mostrado na imaxe, aí vai o código ..


  > <ul id = "nav"> 
  > Home </a> </li> <li> <a href = "#"> Home </ a> </ td> 
  > About </a> </li> <li> <a href = "#"> Quen </ a> </ td> 
  > Services </a> </li> <li> <a href = "#"> Servizos </ a> </ td> 
  > Products </a> </li> <li> <a href = "#"> Productos </ a> </ td> 
  > Sitemap </a> </li> <li> <a href = "#"> Sitemap </ a> </ td> 
  > Help </a> </li> <li> <a href = "#"> Axuda </ a> </ td> 
  > Contact Us </a> </li> <li> <a href = "#"> fale connosco </ a> </ td> 
  </ Ul>