JSFiddle - React, Tailwind, and code Playground

by Vikram Deshmukh

HTML

<ul class="menu">
    <li><a href="#">Population and Socio-Economic Atlas</a>

        <ul>
            <li><a href="#" class="chapter1">Population</a>

                <ul>
                    <li><a href="#" class="map11">Population Density</a>
                    </li>
                    <li><a href="#" class="map12">Population By Sex</a>
                    </li>
                    <li><a href="#" class="map13">Population By Age</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" class="chapter2">Education</a>
            </li>
            <li><a href="#" class="chapter3">Agriculture</a>

                <ul>
                    <li><a href="#" class="map31">Agricultural Land</a>
                    </li>
                    <li><a href="#" class="map31">Agriculture Holding</a>
                    </li>
                    <li><a href="#" class="map31">Agriculture By Type</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Level1 Menu2</a>
    </li>
    <li><a href="#">CA Election 2070</a>

        <ul>
            <li><a href="#" class="election1">Districts</a>
            </li>
            <li><a href="#" class="election2">Constituencies</a>
            </li>
            <li><a href="#" class="election3">Result</a>

                <ul>
                    <li><a href="#" class="election31">District Map</a>
                    </li>
                    <li><a href="#" class="election32">Constituencies Map</a>
                    </li>
                    <li><a href="#" class="election33">Election Result 2070</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">To Be Continued</a>
    </li>
</ul>

CSS

.menu, .menu ul, .menu li, .menu a {
    margin: 5px;
    padding: 0;
}
.menu {
    height: 250px;
    width: 300px;
    background: #FFCC99;
}
.menu li {
    width:100%;
    height:25px;
    text-align:left;
    display: block;
    padding: 0 0px;
    margin: 3px 0px;
    line-height: 25px;
    border-bottom: 1px solid #393942;
}
.menu li a {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
}
.menu li:hover > a {
    color: #FF0000;
}
/* second level menu */
 .menu ul {
    position: relative;
    width: 200px;
    top: -26px;
    left: 295px;
    opacity: 0;
    background: #CCCCCC;
}
.menu li:hover > ul {
    opacity: 1;
}
.menu ul li {
    height: 25px;
    display: none;
    padding: 0 0px;
    width: 200px;
    padding: 0 0px;
    margin: 6px 0px;
    border: none;
    border-bottom: 1px solid #353539;
}
.menu li:hover > ul li {
    height: 25px;
    display: block;
    padding: 0 0px;
}
.menu ul li a {
    font-family: Helvetica, Arial;
    font-style: italic;
    font-weight: normal;
    font-size: 12px;
}
.menu ul li:last-child a {
    border: none;
}
/* third level menu */
 .menu ul ul {
    position: relative;
    width: 200px;
    top: -26px;
    left: 195px;
    opacity: 0;
    background: #00FF00;
}
.menu ul ul:hover > ul {
    opacity: 1;
}
.menu ul ul li {
    height: 25px;
    display: none;
    padding: 0 0px;
    width: 200px;
    padding: 0 0px;
    margin: 6px 0px;
    border: none;
    border-bottom: 1px solid #0000FF;
}
.menu ul ul ul:hover > ul {
    height: 25px;
    display: block;
    padding: 0 0px;
}
.menu ul ul li a {
    font-family: Helvetica, Arial;
    font-style: italic;
    font-size: 12px;
}
.menu ul li:last-child a {
    border: none;
}