Tutorial per creare una bella, semplice, il menu orizzontale CSS |

Tutorial per creare una bella, semplice, il menu orizzontale CSS

Questa è una molto semplice, css menu orizzontale. Questa guida aiuta a creare un semplice e attraente CSS con un menù fresco hover effetto.

Prima di tutto dobbiamo scrivere codice CSS per menu. qui va il codice ..

  # nav 
  ( 
  padding: 0; 
  ) 

  # nav li 
  ( 
  display: inline; 
  ) 

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

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

Seconda di tutti farci scrivere HTML per la lista del menu. Dire che abbiamo 7 link, come mostrato nella foto, qui va il codice ..


  > <ul id = "nav"> 
  > Home </a> </li> <li> <a href = "#"> Home page </ a> </ li> 
  > About </a> </li> <li> <a href = "#"> Informazioni </ a> </ li> 
  > Services </a> </li> <li> <a href = "#"> Servizi </ a> </ li> 
  > Products </a> </li> <li> <a href = "#"> Prodotti </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Mappa del sito </ a> </ li> 
  > Help </a> </li> <li> <a href = "#"> Guida </ a> </ li> 
  > Contact Us </a> </li> <li> <a href = "#"> Contattaci </ a> </ li> 
  </ ul>