Очень интересное выпадающее горизонтальное меню для ucoz на css с эластичным эффектом

[VAOZ]

HTML:

<ul class="hList"> 
<li> 
<a href="#click" class="menu"> 
<h2 class="menu-title">Животные</h2> 
<ul class="menu-dropdown"> 
<li>Кошка</li> 
<li>Собака</li> 
<li>Олень</li> 
<li>Человек</li> 
<li>Свинья</li> 
</ul> 
</a> 
</li> 
<li> 
<a href="#click" class="menu"> 
<h2 class="menu-title menu-title_2nd">Имена</h2> 
<ul class="menu-dropdown"> 
<li>Вася</li> 
<li>Петя</li> 
<li>Прохор</li> 
</ul> 
</a> 
</li> 
<li> 
<a href="#click" class="menu"> 
<h2 class="menu-title menu-title_3rd">Вещи</h2> 
<ul class="menu-dropdown"> 
<li>Клавиатура</li> 
<li>Пицца</li> 
<li>Верёвка</li> 
<li>Мыло</li> 
<li>Велосипед</li> 
<li>Степлер</li> 
<li>Гитара</li> 
<li>Лаваш</li> 
<li>Ириски</li> 
</ul> 
</a> 
</li> 
<li> 
<a href="#click" class="menu"> 
<h2 class="menu-title menu-title_4th">Фильмы</h2> 
<ul class="menu-dropdown"> 
<li>Операция "Ы"</li> 
<li>Матрица</li> 
<li>Пираты карибского моря</li> 
<li>Люди Икс</li> 
</ul> 
</a> 
</li> 
</ul>

CSS:

.hList > * { 
float: left; 
} 
   
.hList * { 
list-style: none; 
margin: 0; 
padding: 0; 
font-size: 100%; 
vertical-align: baseline; 
box-sizing: border-box; 
text-decoration: none; 
color: #555; 
} 
   
.menu { 
display: block; 
position: relative; 
cursor: pointer; 
} 
   
.menu-title { 
display: block; 
min-width: 200px; 
height: 40px; 
padding: 12px 0 0; 
background: #9dc852; 
text-align: center; 
color: #fff; 
font-weight: 700; 
text-transform: uppercase; 
transition: .3s background-color; 
} 
   
.menu-title:before { 
content: ""; 
display: block; 
height: 0; 
border-top: 5px solid #9dc852; 
border-left: 100px solid transparent; 
border-right: 100px solid transparent; 
border-bottom: 0 solid #ddd; 
position: absolute; 
top: 100%; 
left: 0; 
z-index: 101; 
transition: .2s .2s border-top ease-out,.3s border-top-color; 
} 
   
.menu-title:hover { 
background: #8db842; 
} 
   
.menu-title:hover:before { 
border-top-color: #8db842; 
} 
   
.menu:hover > .menu-title:before { 
border-top-width: 0; 
transition: .2s border-top-width ease-in,.3s border-top-color; 
} 
   
.menu-title:after { 
content: ""; 
display: block; 
height: 0; 
border-left: 100px solid transparent; 
border-right: 100px solid transparent; 
border-bottom: 0 solid #ebebeb; 
position: absolute; 
bottom: 0; 
left: 0; 
z-index: 101; 
transition: .2s border-bottom ease-in; 
} 
   
.menu:hover > .menu-title:after { 
border-bottom-width: 5px; 
transition: .2s .2s border-bottom-width ease-out; 
} 
   
.menu-title_2nd { 
background: #4e96b3; 
} 
   
.menu-title_2nd:hover { 
background: #3e86a3; 
} 
   
.menu-title_2nd:before { 
border-top-color: #4e96b3; 
} 
   
.menu-title_2nd:hover:before { 
border-top-color: #3e86a3; 
} 
   
.menu-title_3rd { 
background: #c97676; 
} 
   
.menu-title_3rd:hover { 
background: #b96666; 
} 
   
.menu-title_3rd:before { 
border-top-color: #c97676; 
} 
   
.menu-title_3rd:hover:before { 
border-top-color: #b96666; 
} 
   
.menu-title_4th { 
background: #dbab58; 
} 
   
.menu-title_4th:hover { 
background: #cb9b48; 
} 
   
.menu-title_4th:before { 
border-top-color: #dbab58; 
} 
   
.menu-title_4th:hover:before { 
border-top-color: #cb9b48; 
} 
   
.menu-dropdown { 
min-width: 200px; 
padding: 15px 0; 
position: absolute; 
background: #ebebeb; 
z-index: 100; 
transition: .5s padding,.5s background; 
} 
   
.menu-dropdown:after { 
content: ""; 
display: block; 
height: 0; 
border-top: 5px solid #ebebeb; 
border-left: 100px solid transparent; 
border-right: 100px solid transparent; 
position: absolute; 
top: 100%; 
left: 0; 
z-index: 101; 
transition: .5s border-top; 
} 
   
.menu:not(:hover) > .menu-dropdown { 
padding: 4px 0; 
background: #ddd; 
z-index: 99; 
} 
   
.menu:not(:hover) > .menu-dropdown:after { 
border-top-color: #ddd; 
} 
   
.menu:not(:hover) > .menu-title:after { 
border-bottom-color: #ddd; 
} 
   
.menu-dropdown > * { 
overflow: hidden; 
height: 30px; 
padding: 5px 10px; 
background: transparent; 
white-space: nowrap; 
transition: .5s height cubic-bezier(0.73,0.32,0.34,1.5),.5s padding cubic-bezier(0.73,0.32,0.34,1.5),.5s margin cubic-bezier(0.73,0.32,0.34,1.5),.5s .2s color,.2s background-color; 
} 
   
.menu-dropdown > :hover { 
background: rgba(0,0,0,0.1); 
} 
   
.menu:not(:hover) > .menu-dropdown > * { 
visibility: hidden; 
height: 0; 
padding-top: 0; 
padding-bottom: 0; 
margin: 0; 
color: rgba(25,25,25,0); 
transition: .5s .1s height,.5s .1s padding,.5s .1s margin,.3s color,.6s visibility; 
z-index: 99; 
} 
   
.hList > * + * { 
margin-left: 0; 
}