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-101 default current active">
<a href="/index.php" >11111</a>
</li>
<li class="item-109 deeper parent">
<a href="/index.php/kassovoe-oborudovanie" >222222 </a>
<ul class="nav-child unstyled small">
<li class="item-110">
<a href="/index.php/kassovoe-oborudovanie/onlajn-kassy" >33333333333</a>
</li>
<li class="item-111">
<a href="/index.php/kassovoe-oborudovanie/pos-terminaly" >44444</a>
</li>
</ul>
</li>
<li class="item-101 default current active">
<a href="/index.php" >11111</a>
</li>
<li class="item-101 default current active">
<a href="/index.php" >11111</a>
</li>
<li class="item-112 deeper parent">
<a href="/index.php/mobilnye-kassy-mspos-k" ><span class="image-title">55555</span>
</a>
<ul class="nav-child unstyled small">
<li class="item-113">
<a href="/index.php/mobilnye-kassy-mspos-k/test1" >6.11111</a>
</li>
<li class="item-130">
<a href="/index.php/mobilnye-kassy-mspos-k/testovyj-tovar" >6.00000</a>
</li>
</ul>
</li>
<li class="item-114">
<a href="/index.php/zashchita-informatsii" >77777</a>
</li>
<li class="item-115">
<a href="/index.php/chekovye-printery" >88888</a>
</li>
<li class="item-116">
<a href="/index.php/tekhpodderzhka" >999999</a>
</li>
<li class="item-117"><a href="/index.php/o-kompanii" >101010</a>
</li>
</ul>
</nav>
</div>

CSS

.line_2 {
    min-width: 1200px;
	  max-width: 1920px;
    height:55px;
	  margin: 0 auto;
    background:#005fbd;
    text-align: center;
}
ul.menu{ 
    float:left; 
    height: 100%;
    width:100%; 
    left: 50%;
    list-style:none; 
    height:55px;
    text-align: center;
    font-size: 18px;
    font: 18px Arial, Helvetica, sans-serif;
    position: relative;
    margin: 0;
    padding: 0;
} 
ul.menu li{ 
    float:left; 
    margin-right:10px; 
    position:relative; 
    display:block; 
    left: -25%;
    height:55px;
} 
ul.menu li a{ 
    display:block; 
    padding:0px; 
    color:#fff; 
    background:#333; 
    text-align:center;
    height:55px;
    text-decoration:none; 
    line-height:55px;
    padding: 0 15px;
    
} 
ul.menu li a:hover{ 
    color:#fff; 
    background:#6b0c36; 
    background:#005fbd; /* Выглядит полупрозрачным */ 
} 

/*-— ВЫПАДАЮЩИЕ ПУНКТЫ —-*/ 
ul.menu ul{ 
    list-style:none; 
    position:absolute; 
    left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */ 
    opacity:0; /* Устанавливаем начальное состояние прозрачности */ 
    -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */ 
} 
ul.menu ul li{ 
    padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */ 
    float:none; 
    background:url(dot.gif); 
} 
ul.menu ul a{ 
    white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */ 
    display:block; 
} 
ul.menu li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */ 
    left:0; /* Приносим его обратно на экран, когда нужно */ 
    opacity:1; /* Делаем непрозрачным */ 
} 
ul.menu li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */ 
    background:#6b0c36; 
    background:#005fbd; /* Фон выпадающего*/  
} 
ul.menu li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */ 
   ...