Выпадающее меню на 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>