JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<ul>
  <li><a href="#">ZORNET.RU</a></li>
  <li><a href="#">Услуги</a>
    <ul>
      <li><a href="#">Услуга 1</a></li>
      <li><a href="#">Длинная услуга 2</a></li>
      <li><a href="#">Услуга 3</a></li>
    </ul>
  </li>
  <li><a href="#">Цены</a></li>
  <li><a href="#">Контакты</a></li>
</ul>

CSS

ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  margin-top: 25px;
  background: #819A32;
  height: 50px
}

a {
  text-decoration: none;
  background: #819A32;
  color: #fff;
  padding: 0 15px;
  font-family: arial;
  line-height: 50px;
  display: block;
  border-right: 1px solid #677B27;
  -moz-transition: all .3s .01s ease;
  -o-transition: all .3s .01s ease;
  -webkit-transition: all .3s .01s ease
}

a:hover {
  background: #D43737
}

li {
  float: left;
  position: relative
}

li > ul {
  position: absolute;
  top: 25px;
  display: none
}

li:hover > ul {
  display: block;
  width: 250px
}

li:hover > ul > li {
  float: none
}