Красивый эффект горизонтального меню CSS

<nav class="navigation-kisesutenu mation">
  <ul>
  <li><a href="#">Главная</a>
  <li class="teigotugis-cahanged"><a href="#">Категорий <i class="fa fa-sort-amount-asc" aria-hidden="true"></i></a>
  <ul>
  <li><a href="#">Категория</a></li>
  <li><a href="#">Раздел Web</a></li>
  <li><a href="#">Animations</a>
  </ul>
  </li>
  <li><a href="#">ZorNet.Ru</a>
  <li><a href="#">Скрипты</a>
  <li><a href="#">Шаблоны</a>
  </ul>
</nav>

.navigation-kisesutenu, .mation {
  background: #1f48c1;
}

.navigation-kisesutenu ul ,.mation ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.navigation-kisesutenu ul li ,.dropdown-menu ul li{
  display: inline-block;
  font-size: 0;
  position: relative;
}

.navigation-kisesutenu a, .dropdown-menu a {
  display: block;
  text-decoration: none;
  color: #f1ebeb;
  position: relative;
  padding: 20px 27px;
  margin: 0;
  z-index: 5;
  font-size: 19px;
  text-shadow: 0 1px 0 #3c3838;
}

.navigation-kisesutenu a::before, .mation a::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: #9c0e34;
  left: 0;
  transform: scaleY(0);
  transition: all 0.4s ease-in;
  transform-origin: 0 0;
  z-index: -1;
}

.navigation-kisesutenu a:hover::before, .mation a {
  transform: scaleY(1);
}

.teigotugis-cahanged ul{
  display: block;
  position: absolute;
  width: 175%;
  background:#11308a;
  transform-origin:0 0;
  transform: scaleY(0);
  transition: all 0.5s ease-in-out;
}

.teigotugis-cahanged:hover ul{
  display:block;
  transform: scaleY(1);
}

.teigotugis-cahanged li{
  width: 100%;
}

.teigotugis-cahanged{
  font-size: 15px;
}

.teigotugis-cahanged ul{
  position: absolute;
  background:#11308a;
  transform-origin:0 0;
  transform: scaleY(0);
  transition: all 0.4s ease-in-out;
}

.teigotugis-cahanged:hover ul{
  transform: scaleY(1);
}