Đây là một, rất đơn giản đơn css verticale. Hướng dẫn này sẽ giúp tạo ra một menu CSS đơn giản và hấp dẫn với một hiệu ứng di chuột mát mẻ.

Bước: 1

Trước hết hãy cho chúng tôi viết code CSS cho trình đơn. ở đây đi ma ..

  # nav ul ( 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
  ) 


  # nav ul li ( 
  ; /*IE 6*/ display: inline; / * IE 6 * / 
  ) 


 display :block ; background : #d9d9d9 ; width : 200px ; text-decoration :none ; padding : 4px /*padding for top, bottom*/ 7px /*padding for left, right*/ ; border-bottom : 1px solid #eeeeee ; border-top : 1px solid #cccccc ; border-left : 5px solid # 333333 ; color : # 333333 ; # nav ul li a (display: block; background: # d9d9d9; width: 200px; text-decoration: none; padding: 4px / * padding cho đầu trang, dưới * / 7px / * padding cho trái, bên phải * /; biên giới - bottom: 1px solid # eeeeee; border-top: 1px solid # cccccc; border-left: 5px solid # 333333; color: # 333333; 
  { border-left-color : #0099FF ; color : #0066FF ; background : #c4c4c4 ; } # nav ul li a: hover (border-left-color: # 0099FF; color: # 0066FF; background: # c4c4c4;) 

Bước: 2

Bây giờ chúng tôi tạo ra một cấu trúc cơ bản html.

 > <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About Us </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Contact </a> </li> < /ul> </div> <div id = "nav"> <ul> <li> <a href = "#"> Trang chủ </ a> </ li> <li> <a href = "#"> Giới thiệu </ a> </ li> <li> <a href = "#"> Dịch vụ </ a> </ li> <li> <a href = "#"> Sơ đồ trang web </ a> </ li> <li> <a href = " # "> Liên hệ </ a> </ li> </ ul> </ div> 

Yeah ..! thực hiện nó! xem cách đơn giản là tạo ra một menu CSS ... Một .. demo?

Filed under: Css, Hướng dẫn bởi admin