JSFiddle - React, Tailwind, and code Playground

by Muhammad Hassaan

HTML

<ul>
        <li>Item1
            <ul>
                <li>Item 1.1</li>
                <li>Item 1.2</li>
            </ul>
        </li>
        <li>Item2
            <ul>
                <li>Item 2.1</li>
                <li>Item 2.2</li>
            </ul>
        </li>
    </ul>

CSS

ul li { float:left; position:relative; msrgin-left:10px; list-style:none; width:200px;}
    ul li:first-child{ padding:0px;}
    
    ul ul { position:absolute; left:0; top:0; display:none; width:100px; z-index:10;}
    
    ul li:hover ul{ display:block;}
    
    ul ul li{ float:none; padding-left:0px; padding-top:5px; width:100px;}