JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<ul id="main-list">
    <li><a href="#">Top level list item 1</a>
        <ul>
            <li><a href="#">Second level list</a>
                <ul>
                    <li><a href="#">Third level list item</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Top level list item 2</a>
        <ul>
            <li><a href="#">Second level list</a>
                <ul>
                    <li><a href="#">Third level list item</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Top level list item 3</a>
        <ul>
            <li><a href="#">Second level list</a>
                <ul>
                    <li><a href="#">Third level list item</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Top level list item 4</a>
        <ul>
            <li><a href="#">Second level list</a>
                <ul>
                    <li><a href="#">Third level list item</a></li>
                </ul>
            </li>
        </ul>
    </li>
      
</ul>

CSS

#main-list li > ul {
    display:none;
}
#main-list li:hover > ul {
    display:block;
}
    ul li {
        border:solid 1px red;
        margin: 5px auto;
    }

        ul li a {
            display:block;
            width:200px;
            border: 2px solid #259add;
            background: #259add;
            color: #FFF !important; 
        }