Выпадающее меню на CSS, делалось для джумлы, но использовать можно отдельно.
CSS Выпадающее меню
11.11.2017
CSS общий:
Внимание:Ширину/Высоту нужно указывать у A, если задать у LI, то блок меню будет кликабельным частично.
#top_menu { height: 51px; width: 1200px; } #top_menu li { float: left; width: 195px; height: 51px; /* white-space: nowrap;*/ text-align: center; border-right: #e1b92d solid 1px; border-left: #e1b92d solid 1px; z-index: 5; transition: .3s; } #top_menu a { /* color: #000; padding: 0; text-decoration: none; position: relative; top: 15px; width: auto; display: block; text-transform: uppercase; display: block;*/ color: #000; padding: 16px; text-decoration: none; position: relative; width: auto; display: block; text-transform: uppercase; display: block; height: 100%; width: 100%; } #top_menu li.active > a, #top_menu li.current > a { /* text-decoration: underline;*/ background-color: #fcda3b; } #top_menu li:hover, #top_menu a:hover { /* text-decoration: underline;*/ background-color: #fcda3b; } #top_menu li ul { display: none; } #top_menu li:hover ul { display: block; } #top_menu li:hover ul { display: block; } #top_menu li ul { background-color: #fcda3b; width: 160px; /* margin-top: 29px;*/ padding: 0; margin-left: -1px; } #top_menu li ul li { background-color: #fcda3b; list-style: none; float: none; /* text-align: left;*/ text-decoration: none; border: 1px solid #fcda3b; border-top: #e1b92d solid 1px; border-bottom: #e1b92d solid 1px; transition: .3s; } #top_menu li ul li:hover, #top_menu li ul li:hover a { background-color: #fbc328; } #top_menu li ul li.current a { background-color: #fbc328; }
HTML для джумлы:
<div class="wrap_top_menu"> <div id="top_menu" class="container"> <div class="row"> <jdoc:include type="modules" name="top_menu" style="none" /> </div> </div> </div>
HTML "чистый":
<div id="top_menu" class="container"> <div class="row"> <ul class="nav menu"> <li class="item-107 deeper parent"><a href="/o-kompanii">О компании</a> <ul class="nav-child unstyled small"> <li class="item-113"><a href="/o-kompanii">Наша презентация</a> </li> <li class="item-114"><a href="/o-kompanii/otvetstvennost">Ответственность</a> </li> <li class="item-115"><a href="/o-kompanii/vakansii">Вакансии</a> </li> <li class="item-116"><a href="/o-kompanii/stat-nashim-partnerom">Стать нашим партнером</a> </li> </ul> </li> <li class="item-108 deeper parent"><a href="/uslugi">Услуги</a> <ul class="nav-child unstyled small"> <li class="item-117"><a href="/uslugi/ekspress">Экспресс</a> </li> <li class="item-118"><a href="/uslugi/ekonom">Эконом</a> </li> <li class="item-119"><a href="/uslugi/full-truck">Full truck</a> </li> <li class="item-120"><a href="/uslugi/skladskaya-obrabotka">Складская обработка</a> </li> <li class="item-121"><a href="/uslugi/mezhdunarodnye-perevozki">Международные перевозки</a> </li> <li class="item-122"><a href="/uslugi/ofisnye-i-kvartirnye-pereezdy">Офисные и квартирные переезды</a> </li> </ul> </li> <li class="item-109 deeper parent"><a href="/informatsiya">Информация</a> <ul class="nav-child unstyled small"> <li class="item-123"><a href="/informatsiya/reglament-predostavleniya-uslug">Регламент предоставления услуг</a> </li> <li class="item-124"><a href="/informatsiya/tipovoj-dogovor">Типовой договор</a> </li> <li class="item-125"><a href="/informatsiya/bankovskie-rekvizity">Банковские реквизиты</a> </li> <li class="item-126"><a href="/informatsiya/upakovka">Упаковка</a> </li> <li class="item-127"><a href="/informatsiya/oformlenie-nakladnoj">Оформление накладной</a> </li> </ul> </li> <li class="item-110 deeper parent"><a href="/press-tsentr">Пресс-центр</a> <ul class="nav-child unstyled small"> <li class="item-128"><a href="/press-tsentr">Что нового</a> </li> <li class="item-129"><a href="/press-tsentr/kontakty-dlya-pressy">Контакты для прессы</a> </li> </ul> </li> <li class="item-111"><a href="/filialy">Филиалы</a> </li> <li class="item-112 current active"><a href="/kontakty">Контакты</a> </li> </ul> </div> </div>