Tutorial zu erstellen, eine schöne, einfache, horizontale CSS Menü |

Tutorial zu erstellen, eine schöne, einfache, horizontale CSS Menü

Dies ist eine sehr einfache, horizontale css Menü. Dieses Tutorial hilft bei der Schaffung eines einfachen und attraktiven CSS-Menü mit einem kühlen hover Effekt.

Zunächst lassen Sie uns schreiben, CSS-Code für das Menü. hier geht der Code ..

  # nav 
  ( 
  padding: 0; 
  ) 

  # nav li 
  ( 
  display: inline; 
  ) 

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

Zweite aller uns schreiben HTML-Liste für das Menü. Sagen wir, wir haben 7 Links, wie im Bild, hier ist der 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 = "#"> Home </ a> </ li> <li> <a href = "#"> Über </ a> </ li> <li > <a href = "#"> Dienstleistungen </ a> </ li> <li> <a href = "#"> Produkte </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> <li> <a href = "#"> Hilfe </ a> </ li> <li> <a href = "#"> Kontakt </ a> </ li> < / ul>