JSFiddle - React, Tailwind, and code Playground

by Pasha

HTML

<div id="site_switcher">
    <ul>
        <li class="menu_li" role="menu">
            <a href='#' tabindex="1" class="arrow"></a>
            <a href="#" tabindex="1" class="arrow_close"></a>
            <div class="sub_menu">
                <div class="menu_arrow"></div>
                <ul>
                    <li><a href='#'><span>Photoshop</span></a></li>
                    <li><a href='#'><span>Web-design</span></a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

CSS

#site_switcher ul { margin: 0; padding: 0;}
#site_switcher li { margin: 0; padding: 0;}
#site_switcher a { margin: 0; padding: 0;}
#site_switcher ul {list-style: none;}
#site_switcher a {text-decoration: none;}
#site_switcher {
    display: inline-block;
    padding: 0px 0px;
    margin: 0 21px 50px 150px;
}

#site_switcher > ul > li {
    float: left;
    position: relative;
    height: 16px;
}

#site_switcher > ul > li > a {
    color: #000;
    font-size: 16px;
    line-height: 70px;
    padding: 0px 9px;
}

#site_switcher > ul > li > a:hover {
    color: #fff;
}

.arrow {
    height: 16px;
    width: 16px;
    background: url(http://cloverdesign.ru/wordpress/wp-content/themes/cd/img/arrow.png) no-repeat;
}

.arrow:hover {
    cursor: pointer;
}

.arrow:focus {
    outline: 0;
}

.arrow::-moz-focus-inner {
    border: none;
}

.arrow_close {
    display: none;
    height: 16px; 
    width: 16px;
    background: url(http://cloverdesign.ru/wordpress/wp-content/themes/cd/img/arrow.png) no-repeat;
}

.arrow_close:hover {
    cursor: pointer;
}

.arrow_close:focus {
    outline: 0;
}

.arrow_close::-moz-focus-inner {
    border: none;
}

#site_switcher > ul > li > div.sub_menu ul {
    opacity: 0;
    visibility: hidden;
    padding: 7px 0 5px 0;
    background-image: linear-gradient(bottom, rgb(211,215,207) 0%, rgb(234,234,231) 100%);
    background-image: -o-linear-gradient(bottom, rgb(211,215,207) 0%, rgb(234,234,231) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(211,215,207) 0%, rgb(234,234,231) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(211,215,207) 0%, rgb(234,234,231) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(211,215,207) 0%, rgb(234,234,231) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(204,204,204)),
        color-stop(1, rgb(238,238,238))
    );
    background-color: #eaeae7;
    text-align: left;
    position:...