Это очень простой, 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, Уроки по администратора