Простое выпадающее меню на CSS. Очень легко встраивается в сайт, имеет не много кода. Меню рассчитано на 3 уровня вложенности. Что бы вставить себе на сайт такое выпадающее меню на CSS , вам понадобится выполнить несколько действий. И так, приступим:
|
1 2 3 4 5 6 7 |
.menu {position: relative;z-index: 99999999; float: left; width: 200px; background: #086083;} ul.menu li { border-bottom: 1px solid #00708E;list-style: none;} ul.menu li a {text-decoration: none;display: block;padding: 10px 22px 9px 22px; } ul.menu li ul {display: none;} ul.menu li:hover { background: #87abec;position: relative; } ul.menu li:hover > ul {display: block;} ul.menu li:hover ul{position: absolute;top: 0;left: 200px; background-color: #086083;width: 200px;margin-top: 0;} |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="menu"> <li><a href="#">Об агенстве</a></li> <li><a href="#">Выпадающий пункт</a> <ul> <li><a href="#">Пункт 1.1</a></li> <li><a href="#">Выпадающий пункт 2</a> <ul> <li><a href="#">Пункт 2.2.1</a></li> <li><a href="#">Пункт 2.2.2</a></li> </ul> </li> </ul> </li> <li><a href="#">Инфоцентр</a></li> </ul> |
Радуемся результату. Выпадающее меню css готово.
Залишити відповідь