Як зробити меню, що випадає

Красиве меню, що випадає можна створити не тільки в jаvascript, але і використовуючи стандартні теги HTML. Такий спосіб створення меню, що випадає буде корисний тим, хто тільки починає свої перші кроки в створенні сайтів і хоче спростити роботу зі створення меню на сторінках.

Содержание

Інструкція
Відео: Меню, що випадає на css
Відео: Як зробити меню, що випадає

Інструкція

Відео: Меню, що випадає на CSS

У коді HTML таке меню є ненумерований списком з вкладеними списками всередині. Для початку створіть файл style.css і скопіюйте туди наступний CSS-код, необхідний для оформлення та форматування меню:

#nav, #nav ul {
list-style: none;
margin: 0-
padding: 0-
border: 1px solid # 000-
background: # 515151-
float: left;
width: 100% -
}
#nav li {
float: left;
position: relative-
background-color: # 003366-
background: none;
}
#nav li ul {
display: none;
position: absolute-
background-color: # 003366-
padding: 8px 0-
width: 138px;
}

Тепер потрібно доповнити пункти меню оформленням. Визначте для них ширину і висоту, приберіть лінії підкреслення, задайте чітку ширину кожного посилання, а також вкажіть потрібні кольори бекграунду.

Для всіх цих змін додайте в файл наступний код:

#nav a {
color: # fff-
text-decoration: none;
display: block-
width: 120px;
padding: 4px 10px;
background-color: # 003366 repeat-y right;
}
#nav a: hover {
color: # 000-
background-color: # 0033FF-
}
#nav li: hover {
background-color: # 333333-
}