Tutorial untuk menciptakan Beautiful, sederhana, menu horisontal CSS |

Tutorial untuk menciptakan Beautiful, sederhana, CSS menu horisontal

Ini adalah sangat sederhana, menu css horisontal. Tutorial ini membantu untuk menciptakan cara yang mudah dan menarik dengan CSS menu yang dingin hover efek.

Pertama-tama mari kita tuliskan kode CSS untuk menu. disini berjalan kode ..

  # nav 
  ( 
  padding: 0; 
  ) 

  # nav li 
  ( 
  display: inline; 
  ) 

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

Kedua semua marilah kita menulis HTML daftar menu. Katakanlah kita memiliki 7 link, seperti yang ditunjukkan dalam gambar, kode berjalan di sini ..


 > <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 = "#"> Rumah </ a> </ li> <li> <a href = "#"> Tentang </ a> </ li> <li > <a href = "#"> Layanan </ a> </ li> <li> <a href = "#"> Produk </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> <li> <a href = "#"> Petunjuk </ a> </ li> <li> <a href = "#"> Hubungi Kami </ a> </ li> < / ul>