Tutorial pentru a crea un frumos, simplu, meniul orizontal CSS |

Tutorial pentru a crea un frumos, simplu, orizontale CSS meniul

Aceasta este una foarte simplă, orizontală css meniu. Acest ghid vă ajută să creaţi un simplu si atractiv CSS meniul cu un calm hover efect.

Mai întâi de toate să ne scrie cod CSS pentru meniu. aici merge codul ..

  # nav 
  ( 
  padding: 0; 
  ) 

  # nav li 
  ( 
  display: inline; 
  ) 

 # nav li o 
  ( 
  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; 
  ) 

În al doilea rând de toate să ne scrie HTML lista de meniu. Spune-avem 7 link-uri, după cum se arată în imagine, aici merge codul ..


 > <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 = "#"> Prima pagina </ a> </ li> <li> <a href = "#"> Despre </ a> </ li> <li > <a href = "#"> Servicii </ a> </ li> <li> <a href = "#"> Produse </ a> </ li> <li> <a href = "#"> Harta site-ului </ a> </ li> <li> <a href = "#"> Ajutor </ a> </ li> <li> <a href = "#"> Contactaţi-ne </ a> </ li> < / ul>