JSFiddle - React, Tailwind, and code Playground

by naykris

HTML

<ul class="site-nav">
              <li class="site-nav_item">
                <a class="site-nav_link" href="catalog.html">Каталог</a>
                <ul class="site-nav-sub">
                    <li><a class="first-item" href="#">Новинки</a></li>
                    <li><a href="#">Сливочное</a></li>
                    <li><a href="#">Щербеты</a></li>
                    <li><a href="#">Фруктовый лед</a></li>
                    <li><a href="#">Мелорин</a></li>
                  </ul>
              </li>
              <li class="site-nav_item"><a class="site-nav_link" href="#">Доставка и оплата</a></li>
              <li class="site-nav_item"><a class="site-nav_link" href="#">О Компании</a></li>
            </ul>

CSS

a{
  text-decoration: none;
}

.site-nav{
  display: flex;
  list-style: none;
}

.site-nav_item{
padding:0 8px;}

.site-nav_link{
  padding-top: 4px;
  padding-bottom: 4px;
  margin: 0 8px;
  background: 
  linear-gradient(to right, transparent 4px, rgba(63, 81, 181, 0.3) 4px, rgba(63, 81, 181, 0.3) calc(100% - 4px), transparent calc(100% - 4px));
  background-size:100px 10px;
  
}

.site-nav_link:hover{
  margin: 0;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 16px;
  color: #fff;
  background: orange;
}

.site-nav-sub{
  display: none;
}