Tutorial pour créer une belle, simple, horizontal CSS menu |

Tutorial pour créer une belle, simple, CSS menu horizontal

C'est très simple, horizontal css menu. Ce tutoriel permet de créer un moyen simple et attrayant avec un menu CSS cool effet hover.

Tout d'abord, permettez-nous à écrire de code CSS pour le menu. ici est le code ..

  # 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; 
  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; 
  ) 

Deuxième de tous nous écrire en langage HTML pour la liste de menu. Disons que nous avons 7 liens, comme le montre l'image, ici, est le code ..


 > <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 = "#"> Accueil </ a> </ li> <li> <a href = "#"> En savoir plus </ a> </ li> <li > <a href = "#"> Services </ a> </ li> <li> <a href = "#"> Produits </ a> </ li> <li> <a href = "#"> Plan du site </ a> </ li> <li> <a href = "#"> Aide </ a> </ li> <li> <a href = "#"> Contactez-nous </ a> </ li> < / ul>