Ito ay isang napaka-simple, verticale css menu. Tutorial na ito ay tumutulong upang lumikha ng isang simple at kaakit-akit na menu CSS na may isang cool na epekto pinapadaan.

Hakbang: 1

Una sa lahat ipaalam sa amin sumulat ng CSS code para sa menu. dito napupunta ang code ..

  # nav ul (
 margin: 0;
 padding: 0;
 listahan ng-style-uri: none;
 ) 


  # nav li ul (
 ; /*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 isang (display: block; background: # d9d9d9; width: 200px; text-labor: none; padding: 4px / * padding para sa itaas, ibaba * / 7px / * padding para sa kaliwa, kanan * /; hangganan ilalim: 1px solid # eeeeee; border-top: 1px solid # cccccc; hangganan-kaliwa: 5px solid # 333,333; color: # 333,333; 
  { border-left-color : #0099FF ; color : #0066FF ; background : #c4c4c4 ; } # nav ul li isang: pinapadaan (hangganan-kaliwa-color: # 0099FF; color: # 0066FF; background: # c4c4c4;) 

Hakbang: 2

Ngayon gumawa kami ng isang basic html istraktura.

 > <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 = "#"> Home </ a> </ li> <li> <a href = "#"> Tungkol sa Amin </ a> </ li> <li> <a href = "#"> Serbisyo </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> <li> <a href = " # "> Makipag-ugnayan sa </ a> </ li> </ ul> </ div> 

Yeah ..! nito tapos na! makita kung paano ang simpleng ay upang lumikha ng isang CSS menu ... Isang demo ..?