JSFiddle - React, Tailwind, and code Playground

by Artem Pryanishnikov

HTML

<div class="line_2">
<nav class="main-navigation">
<ul class="nav menu">
<li class="item-109 deeper parent"><a href="/index.php/kassovoe-oborudovanie" >Кассовое оборудование</a>
  <ul class="nav-child unstyled small">
    <li class="item-110 deeper parent">
      <a href="/index.php/kassovoe-oborudovanie/onlajn-kassy" >Онлайн кассы</a>
       <ul class="nav-child unstyled small">
         <li class="item-131">
         <a href="/index.php/kassovoe-oborudovanie/onlajn-kassy/kassa-1" >касса 1</a>
         <ul class="nav-child unstyled small">
         <li class="item-131">
         <a href="/index.php/kassovoe-oborudovanie/onlajn-kassy/kassa-1" >касса 1</a>
         </li>
       </ul>
         </li>
       </ul>
      </li>
      <li class="item-111"><a href="/index.php/kassovoe-oborudovanie/pos-terminaly" > Pos терминалы</a></li><li class="item-132"><a href="/index.php/kassovoe-oborudovanie/eshche-kakoj-to-punkt-menyu" >еще какой-то пункт меню</a></li></ul></li><li class="item-112 deeper parent"><a href="/index.php/mobilnye-kassy-mspos-k" ><span class="image-title">Мобильные кассы MSPOS-K</span></a><ul class="nav-child unstyled small"><li class="item-113"><a href="/index.php/mobilnye-kassy-mspos-k/test1" >test1</a></li><li class="item-130"><a href="/index.php/mobilnye-kassy-mspos-k/testovyj-tovar" >Тестовый товар</a></li></ul></li><li class="item-114"><a href="/index.php/zashchita-informatsii" >Защита информации</a></li><li class="item-115"><a href="/index.php/chekovye-printery" >Чековые принтеры</a></li><li class="item-116"><a href="/index.php/tekhpodderzhka" >Техподдержка</a></li><li class="item-117"><a href="/index.php/o-kompanii" >О компании</a></li><li class="item-118"><a href="/index.php/blog" >Блог</a></li></ul>

            </nav>
        </div>

CSS

.line_2 {
    min-width: 1200px;
	max-width: 1920px;    
	margin: 0 auto;
    height: 40px;
}
/* Main navigation */


.main-navigation {
position: relative;
background: #005fbd;
height: 40px;
margin: 0px 0;
padding: 0;
float: left;
width: 100%;
z-index: 10
}
.main-navigation ul {
clear: left;
position: relative;
right: 50%;
height: 40px;
float: right;
text-align: center;
font: 15px Arial, Helvetica, sans-serif;
list-style: none;
padding: 0;
margin: 0
}

/** Основные пункты **/
.main-navigation > ul > li {
position: relative;
left: 50%;
float: left;
height: 40px;
padding: 0;
margin: 0
}
.main-navigation > ul > li > a {
border-left: 1px solid #666;
display: block;
color: #fff;
text-decoration: none;
padding: 0 20px;
line-height: 40px;
}
.main-navigation > ul > li:first-child > a {
border: none
}
.main-navigation > ul > li:hover > a, .main-navigation > ul > li.hover > a, .main-navigation > ul > li.active > a {
color: #fff
}
.main-navigation > ul > li:hover, .main-navigation > ul > li.hover, .main-navigation > ul > li.active {
background: #08437d
}

/* Выпадающие подпункты */
.main-navigation ul li ul {
position: absolute;
left: 0;
top: 40px;
display: none;
list-style: none;
visibility: hidden;
padding: 0;
margin: 0;
width: 200px
}
.main-navigation > ul > li ul li {
background-color: #08437d;
position: relative;
left: 0;
display: list-item;
float: none;
height: auto;
margin: 0;
text-align: left;
}
.main-navigation ul li ul li a {
border-bottom: 1px solid #999;
display: block;
color: #fff;
padding: 10px 15px;
text-decoration: none;
}
.main-navigation ul li ul li.parent a {
position: relative;
}
.main-navigation ul li ul > li.parent > a::before {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
content: "";
display: block;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
height: 6px;
width: 6px;
}
.main-navigation ul li ul li:hover, .main-navigation ul li ul li.hover {
background-color: #08437d
}
.main-navigation ul...