JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div class="left-menu">
<ul class="menu-left">
    <li id="current" class="parent active item5">
        <a href="/teliani/index.php?option=com_telianiwines&amp;view=winesubcategory&amp;Itemid=5"><span>ღვინო</span></a>
            <ul>
            <li class="parent item6">
                <a href="/teliani/index.php?option=com_telianiwines&amp;view=winesubcategory&amp;Itemid=6"><span>TELIANI VALLEY</span></a>
                    <ul>
                        <li class="item7">
                            <a href="javascript:;"><span>ლეგენდა</span></a>
                        </li>
                        <li class="item8">
                            <a href="javascript:;"><span>ღვინოები</span></a>
                        </li>
                        <li class="item9">
                            <a href="javascript:;"><span>ჯილდოები</span></a>
                        </li>
                    </ul>
                </li>
            </ul>
    </li>
</ul>
</div>

CSS

/* 1 */
.left-menu ul {
    width: 145px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.left-menu ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.left-menu ul li {
    width: 145px;
    margin: 0;
    padding: 0;
    height: 20px;
    background:#fff;
}

.left-menu ul li a {
    width:131px;
    height:20px;
    padding-left: 14px;
    float: left;
    font: normal 12px calibri, sylfaen, georgia, arial, verdana;
    color: #7b2029; text-decoration: none;
}

.left-menu ul li:hover, .left-menu ul li#current  {
    width: 145px;
    height: 20px;
    color:#fff;
    text-decoration: none;
}

.left-menu ul li#current a {
    width: 131px;
    height: 20px;
    padding-left: 14px;
    color: #fff;
    text-decoration: none;
    background: #7b2029;
    display:block;
}

/* 2 */
.left-menu ul li ul  {
    width:145px;
    padding:0;
    margin: 2px 0 0 0;
    float: left;
    list-style: none;
}

.left-menu ul li ul li {
    width: 137px;
    margin: 0;
    padding: 0;
    height: 20px;
    list-style: none;
    padding-left: 8px;
}

.left-menu ul li ul li a {
    width: 120px;
    height: 20px;
    padding-top: 0px;
    font: normal 12px/20px calibri, sylfaen, georgia, arial, verdana;
    background:#887b33;
}


/* 3 */