Привет, сегодня я расскажу вас как сделать несложное, но от этого не менее красивое, раскрывающееся меню на «чистом» HTML и CSS, без усложнения кода скриптами и прочей, утяжеляющей страницу мутью. Применяется это меню может где угодно: и на личных страничках, и на корпоративных сайтах со сложной иерархической структурой. Для начала нам нужно создать HTML-файл, который будет отвечать за пункты меню. Поехали.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="mn">
<ul>
    <li><a href="#">Статьи</a>
<ul>
    <li><a href="#">... о дизайне</a></li>
    <li><a href="#">... о программировании</a></li>
    <li><a href="#">... обо всем на свете</a></li>
</ul>
</li>
    <li><a href="#">Контакты</a></li>
    <li><a href="#">Категории</a>
<ul>
    <li><a href="#">CSS</a></li>
    <li><a href="#">PHP и mySQL</a></li>
    <li><a href="#">JavaScript и jQuery</a></li>
</ul>
</li>
</ul>
</div>

Сейчас этот список выглядит вот так

выпадающее меню

выпадающее меню


Для того, чтобы изменить его внешний вид, напишем несколько строк CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#mn ul {
list-style: none; /*убираем маркер у элементов списка*/
width: 190px; /*задаем ширину вертикального меню*/
}
#mn ul li {
position: relative; /*для того, чтобы выпадающий блок мы
могли
позиционировать абсолютно*/
}
#mn li ul {
position: absolute;/*вот для этого*/
left:100px;/*отступ слева появляющегося блока*/
top:5px;
display: none;/*сначала невидим*/
}
#mn ul li a {
display: block;
}
/*и самое главное, при наведении показать*/
#mn li:hover ul {
display: block;
}
/*танцы с бубном для ие*/
* html #mn ul li { float: left; height: 1%; }
* html #mn ul li a { height: 1%; }

Вот что у нас получилось: Простое выпадающее меню
Остается самое интересное, декорирование этого самого меню, тут полет фантазии не знает предела, поэтому оставляю вам место для творчества. То, что в конечном итоге получилось у меня, можете лицезреть на картинке снизу. Удачи.

выпадающее меню (последняя версия)

выпадающее меню (последняя версия)