Простое выпадающее меню для uCoz

.kebab {  
  cursor: pointer;  
  position: relative;  
  display: inline-block;  
  box-sizing: border-box;  
  padding: 0 16px;  
  top: 12px;  
}  
.kebab figure {  
  width: 6px;  
  height: 6px;  
  border-radius: 5px;  
  background: #00bcd4;  
  margin: 3px 0;  
}  
.middle {  
  transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);  
  transform: scale(1);  
  position: relative;  
  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);  
  -webkit-filter: blur(0.1px);  
  filter: blur(0.1px);  
}  
.middle.active {  
  transform: scale(4.5);  
  transition: all 0.25s cubic-bezier(0.32, 2.04, 0.85, 0.54);  
  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);  
}  
.cross {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%) scale(0);  
  margin-top: -1px;  
  font-family: "Nunito", sans-serif;  
  color: white;  
  transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);  
  font-size: 22px;  
  user-select: none;  
}  
.cross.active {  
  transform: translate(-50%, -50%) scale(1);  
  transition: all 0.15s cubic-bezier(0.32, 2.04, 0.85, 0.54);  
}  
.nav a, .nav li {  
  font-family: Roboto, sans-serif;  
}  
.nav a, .nav li, .nav a:hover {  
  color: #6b6b6b;  
  text-decoration: none;  
}  
.nav {  
  margin-left: 20%;  
}  
.nav > li {  
  display: inline-block;  
  padding: 1em 18px;  
  cursor: pointer;  
}  
.nav > li:hover {  
  background: #ebebeb;  
}  
.dropdown {  
  position: absolute;  
  right: 0;  
  top: 3em;  
  transition: all 0.25s ease-out;  
  transform: scale(0);  
  transform-origin: 100% 0;  
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);  
}  
.dropdown li {  
  display: block;  
  width: 100%;  
}  
.dropdown li a {  
  width: 100%;  
  padding: 1em 18px;  
  display: inline-block;  
  white-space: pre;  
  box-sizing: border-box;  
}  
.dropdown li a:hover {  
  background: #ebebeb;  
}  
.dropdown:hover ul {  
  transform: scale(1);  
}  
.dropdown.active {  
  transform: scale(1);  
  transition: all 0.25s cubic-bezier(0.5, 1.8, 0.9, 0.8);  
}

<ul class="nav">  
<li><a href="#">Главная страница</a></li>  
<li><a href="#forum">Форум сайта</a></li>  
<li><a href="#">О компании uCoz</a></li>  
<div class="kebab">  
<figure></figure>  
<figure class="middle"></figure>  
<p class="cross">x</p>  
<figure></figure>  
<ul class="dropdown">  
<li><a href="#">Лучшие сайты</a></li>  
<li><a href="#">Шаблоны</a></li>  
<li><a href="#">Скрипты</a></li>  
<li><a href="#">PHP-скрипты</a></li>  
<li><a href="#">Уроки</a></li>  
<li><a href="#">Видео уроки</a></li>  
<li><a href="#">Вебинары</a></li>  
<li><a href="#">Украшения</a></li>  
</div>  
</ul>

<script>  
var kebab = document.querySelector('.kebab'), middle = document.querySelector('.middle'), cross = document.querySelector('.cross'), dropdown = document.querySelector('.dropdown');  
kebab.addEventListener('click', function () {  
  middle.classList.toggle('active');  
  cross.classList.toggle('active');  
  dropdown.classList.toggle('active');  
});  
</script>