выпадающее меню css примеры

Сейчас я хотел бы вам показать пример просто выпадающего меню полностью на css, без применения javascript. Такое меню служит для экономии места в основном меню, разбивая его на подпункты.Вот пример выпадающего меню на css, которое я сделал: Теперь можно разобрать код:HTML<ul id="menu"><li><a href="http://arteom.net/">arteom.net</a></li><li><a href="#">Category</a><ul><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li></ul></li><li><a href="#">Category</a><ul><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li></ul></li><li><a href="#">Category</a><ul><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li></ul></li><li><a href="#">Category</a><ul><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li><li><a href="#">SubCategory</a></li></ul></li></ul>При наведении на один из пунктов горизонтального меню "выпадает" вертикальное подменю.CSS#menu{float:left;font-weight:bold;/* Делаем текст в меню полужирным */}#menu li{float:left;list-style:none;/* Убираем маркеры */margin-right:5px;/* Отступ справа на 5 пикселей */position:relative;/* Выпадающее меню будет позиционироваться относительно пункта обычного меню */}#menu li a{background:#e80000;/* Делает фон ссылки красным */display:block;color:#fff;/* Делаем цвет ссылки белым */padding:4px 6px;text-decoration:none;/* Убираем линию внизу ссылки */border-radius:5px;}#menu li a:hover{background:#cc0000;/* Фон при наведении на ссылку будет меняться на чуть темнее красный */}/* Ввсплывающее меню */#menu ul{display:none;/* Скрываем , когда не нужно */position:absolute;/* Делаем абсолютное позиционирование */left:0;/* Прижат к левому краю */}#menu li:hover ul{display:block;/* Появление меню */}#menu ul li{float:none;margin-top:2px;/* делаем отступ сверху на 2 пикселя */}Думаю все достаточно ясно расписано в комментариях к коду. Теперь ваше дело поставить его на свой сайт и сделать его внешнее оформление.

Выпадающее меню на CSS

» » Выпадающее меню на CSS

Выпадающее меню на CSS » Блог вебмастера