JSFiddle - React, Tailwind, and code Playground

by QW01_01

HTML

<script src="//fonts.googleapis.com/css?family=Roboto:400,300,100&amp;subset=latin,cyrillic"></script>
<ul class="main-header-menu">
            <li><a href="javascript:void(0);">Торговля</a>
                <div class="main-header-sub-menu">
                    <ul>
                        <li><a href="http://xn----8sbaneb5cd3aehf6jg.xn--p1ai">Каталог тендеров</a>
                        </li>
                        <li><a href="/add.html">Добавить фирму</a>
                        </li>
                    </ul>
                    <div>
                        <span>
                            <h3><a href="http://www.samr.ru/1.html">Авто, транспорт</a></h3>
                            <ul class="links">
                                <li><a href="http://www.samr.ru/1.html">Автозапчасти&nbsp;(335)</a>
                                </li>
                                <li><a href="http://www.samr.ru/1.html">Автохимия&nbsp;(46)</a>
                                </li>
                                <li><a href="http://www.samr.ru/1.html">Автомобили и транспортные средства&nbsp;(227)</a>
                                </li>
                                <li><a href="http://www.samr.ru/1.html">Сельскохозяйственная техника&nbsp;(20)</a>
                                </li>
                            </ul>
                        </span>
                        <span>
                            <h3><a href="http://www.samr.ru/1.html">Оборудование и техника</a></h3>
                            <ul class="links">
                                <li><a href="http://www.samr.ru/1.html">Бытовая техника&nbsp;(66)</a>
                                </li>
                                <li><a href="http://www.samr.ru/1.html">Компьютеры и оргтехника&nbsp;(147)</a>
                                </li>
                                <li><a href="http://www.samr.ru/1.html">Средства связи&nbsp;(39)</a>
                                </li>
                      ...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100&subset=latin,cyrillic);

*{
    box-sizing:border-box;
}

body
{
    font-family: Roboto,Arial,sang-serif;
    font-size: 16px;
    font-weight: 300;
}

a
{
    color: #2d509a;
}
a:hover
{
    color: #d00;
}
a:visited
{
    color: #657087;
}

.main-header-menu
{
    font-size: 0;

    border-top: 1px solid  #3a67c3;
    background-color: #3a67c3;
}

.main-header-menu li
{
    display: inline-block;

    transition: .3s;
}
.main-header-menu > li > a
{
    font-size: 16px;

    display: block;

    padding: 5px 15px;

    transition: .3s;
    text-decoration: none;

    color: white;
}
.main-header-menu > li:active,
.main-header-menu > li:hover
{
    background-color: white;
}
.main-header-menu > li:active > a,
.main-header-menu > li:hover > a
{
    color: #3a67c3;
}

.main-header-sub-menu
{
    position: absolute;
    left: 0;

    visibility: hidden;

    width: 100%;
    height: 0;
    padding: 0 15px;

    transition: .3s;
    pointer-events: none;

    opacity: 0;
    border-bottom: 1px solid #3a67c3;
    background-color: white;
}

.main-header-sub-menu a
{
    font-family: Arial,sang-serif;
    font-size: 13px;

    display: block;

    padding: 5px 10px;

    text-decoration: none;
}
.main-header-sub-menu:active,
.main-header-sub-menu:hover,
.main-header-menu > li:active > .main-header-sub-menu,
.main-header-menu > li:hover > .main-header-sub-menu
{
    visibility: visible;

    height: auto;

    pointer-events: auto;

    opacity: 1;
}
.main-header-sub-menu h3 a
{
    font-size: 16px;
}
.main-header-sub-menu div li
{
    display: block;

    border-bottom: 1px dotted #aaa;
}
.main-header-sub-menu div li:last-child
{
    margin-bottom: 10px;

    border-bottom: 0;
}

.main-header-sub-menu a:hover
{
    color: #d00;
}

.main-header-sub-menu div
{
    padding: 15px 0;

       -moz-column-count: 4;
       -moz-column-gap: 15px;
        -ms-column-count: 4;
        -ms-column-gap: 15px;
   ...