JSFiddle - React, Tailwind, and code Playground

by Thierryh

HTML

<div class="navigation">
				<ul class="nav menu nav-pills">
<li class="item-464 current active"><a href="/"><img src="/images/nav-home-icon.png" alt="Главная"></a></li><li class="item-444 deeper parent"><a href="/index.php/sample-sites">Новости</a><ul class="nav-child unstyled small"><li class="item-473"><a href="/index.php/getting-started">Все</a></li><li class="item-474 deeper parent"><a href="/index.php/news/news-europe">Европа</a><ul class="nav-child unstyled small"><li class="item-476"><a href="/index.php/news/news-europe/news-england">Англия</a></li><li class="item-477"><a href="/">Германия</a></li><li class="item-478"><a href="/index.php/getting-started">Голландия</a></li><li class="item-479"><a href="/index.php/getting-started">Испания</a></li><li class="item-480"><a href="/index.php/getting-started">Италия</a></li><li class="item-481"><a href="/index.php/getting-started">Португалия</a></li><li class="item-482"><a href="/index.php/getting-started">Франция</a></li><li class="item-483"><a href="/">Лига Чемпионов</a></li><li class="item-484"><a href="/">Лига Европы</a></li></ul></li><li class="item-475"><a href="/index.php/getting-started">Америка</a></li></ul></li><li class="item-207 deeper parent"><a href="/">Чемпионаты</a><ul class="nav-child unstyled small"><li class="item-489 deeper parent"><a href="/">Англия</a><ul class="nav-child unstyled small"><li class="item-495"><a href="/">Премьер-Лига</a></li><li class="item-496"><a href="/">Чемпионшип</a></li><li class="item-497"><a href="/">Лига Один</a></li><li class="item-498"><a href="/">Лига Два</a></li><li class="item-499"><a href="/">Конференция</a></li><li class="item-500"><a href="/">Кубок Англии</a></li><li class="item-501"><a href="/">Кубок Лиги</a></li></ul></li><li class="item-490 deeper parent"><a href="/">Германия</a><ul class="nav-child unstyled small"><li class="item-502"><a href="/">Бундеслига</a></li></ul></li><li class="item-491"><a href="/">Испания</a></li><li class="item-492 deeper...

CSS

ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #ccc;
}
li {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
    display: inline-block;
    /*вывод менюшек по горизонтали*/
}
.nav-pills li { /*новое добавлено, для правильного вывода подменю*/
    position: relative;
}
li ul {            /*выстраивает все меню по горизонтали*/
    position: absolute;
    left: 0px;
    /*отвечает за интервал между меню и подменю*/
    top: auto;
    z-index: 5; /*добавлено*/
    display: none;
}
ul li a {   /*оформление пунктов меню*/
    display: block;
    text-decoration: none;
    color: #fff;
    background: #4d4d4d;
    padding: 2px 0 2px 10px;
    border: 1px solid #ccc;
    border-bottom: 2px solid transparent; /*изменено*/
}
ul ul ul{         /*добавлено для правильного отображения подменю*/
    position: absolute;
    left: 100%;
    top: 0;
}
ul li a:hover { /* при наведении на пункты меню*/
    background: #000;
    border-bottom: 2px solid #F5B800;  
}
ul li a:active {
    background: #000;
    border-bottom: 2px solid #F5B800;
}
li:hover > ul {            /*подменю становятся видимыми*/
    display: block;
}