Це дуже простий, verticale CSS меню. Цей підручник допоможе створити простий і привабливою CSS меню з прохолодною наведіть ефект.

Крок: 1

Перш за все, давайте писати код CSS меню. Тут йде код ..

  # (NAV вулиця 
  маржі: 0; 
  оббивка: 0; 
  Список стилі типу: немає; 
  ) 


  # NAV вулиця LI ( 
  ; /*IE 6*/ Дисплей: вбудований; / * 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 вулиця LI A (відображення: блок; фону: # d9d9d9, ширина: 200px; текстопроцессорних оздоблення: немає; оббивка: 4px / * для прокладки зверху, знизу * / 7px / * набивки для лівої, правою * /; кордонів внизу: 1px твердих # eeeeee; прикордонного рейтинг: 1px твердих # cccccc; прикордонного ліворуч: 5px твердих # 333333; колір: # 333333; 
  { border-left-color : #0099FF ; color : #0066FF ; background : #c4c4c4 ; } # NAV вулиця LI A: наведіть (прикордонного лівий колір: # 0099FF; COLOR: # 0066FF; фону: # c4c4c4;) 

Крок: 2

Тепер ми створимо базову структуру 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 = "#"> Головна сторінка </ A> </ LI> <li> <a HREF = "#"> Про нас </ A> </ LI> <li> <a HREF = "#"> Послуги </ A> </ LI> <li> <a HREF = "#"> Карта сайту </ A> </ LI> <li> <A HREF = " # "> Зворотній зв'язок </ A> </ LI> </ UL> </ DIV> 

Так ..! його зробили! побачити, як просто створити CSS меню ... А демо ..?

Filed в: CSS, Уроки по адміністратора