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...

CSS

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #ccc;
    /*убрал width:150px , это ограничивало ширину*/
}
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;
}