JSFiddle - React, Tailwind, and code Playground

by irinablue

HTML

<ul>
    <li>
        <a href="#">Компания</a>
        <ul>
            <li><a href="#"><span>о нас</span></a></li>
            <li><a href="#"><span>миссия</span></a></li>
            <li><a href="#"><span>ценности</span></a></li>
            <li class="l"><a href="#"><span>история</span></a></li>
        </ul>
    </li>
</ul>

CSS

ul {background:#f25f11;}
ul li {line-height:30px;}
ul li a {padding-left:23px;color:#fff;text-decoration:none;text-shadow:-1px -1px #bf7838;}
ul li ul {display:none;background:#f5994c;border:1px #ef5402 solid;border-top:0;}
ul li:hover ul {display:block;}
ul li ul li {height:30px;}
ul li ul li a {display:block;padding:0 8px;}
ul li ul li a span {display:block;padding-left:15px;border-bottom:1px #f47f18 solid;box-shadow:0 1px 0 #f5aa69;}
ul li ul li a:hover {background:#f67000;}
ul li ul li.l a span,
ul li ul li a:hover span {border-bottom:0;box-shadow:none;}