JSFiddle - React, Tailwind, and code Playground

by naykris

HTML

<nav class="menu">
                <ul class="menu__list">
                    <li class="menu__list-item"><a class="menu__link" href="#">Каталог</a>
                        <ul class="menu__sub-list">
                            <li class="menu__sub-list__item"><a class="menu__link" href="#">Механика</a></li>
                            <li class="menu__sub-list__item"><a class="menu__link" href="#">Автомат</a></li>
                            <li class="menu__sub-list__item"><a class="menu__link" href="#">Полуавтомат</a></li>
                        </ul>
                    </li>
                    <li class="menu__list-item"><a class="menu__link" href="#">Новости</a></li>
                    <li class="menu__list-item"><a class="menu__link" href="#">Доставка</a></li>
                    <li class="menu__list-item"><a class="menu__link" href="#">Контакты</a></li>
                    <li class="menu__list-item menu__list-item--search"><a class="menu__link" href="#">Что будем искать?</a></li>
                    <!--<li class="menu__list-item menu__list-item--cart"><a class="menu__link" href="#">В корзине пусто</a></li>-->
                </ul>
            </nav>

CSS

.menu {
    font-size: 18px;
}

.menu__list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    line-height: 55px;
}

.menu__list-item {
    border-top: 1px solid #f5f5f5;
    text-indent: 65px;

}

.menu__sub-list {
    background-color: #fcfcfd;
    padding-left: 0;
    text-indent: 90px;

}

.menu__sub-list__item {
    list-style: none;
    border-top: 1px solid #f5f5f5;

}

.menu__link {
    display: block;
    text-decoration: none;
    color: #000000;
}



.menu__list-item--search::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("https://goo.gl/images/neYPwP");
    background-color: red;
}