JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="header_nav">
                 <ul>
                    <li> 
                    <input type="button" value="Button 1" name="nav_button" id="nav_button">
                        <ul>
                             <li>Locations</li>
                            <li> 
                            Mumbai
                             <ul>
                                <li>Txt 1</li>
                                <li>Txt 2s</li>
                                <li>Txt 3</li>
                            </ul>
                            </li>
                             
                            <li>Delhi</li>
                            <li>Banglore</li>
                            <li>Nagpur</li>
                         </ul>
                         
                     </li>
                    </ul>
             </nav>

CSS

.header_nav
    {
      width:800px;
      height:400px;
    }
    .header_nav ul 
    {
      list-style:none;
    }
    .header_nav ul ul
    {
      display:none;
    }
    .header_nav ul ul #nav_button:hover>ul
    {
     display:block;
    }
    .header_nav ul ul li >ul
    {
      display:none;
    }
    .header_nav ul li:hover >ul
    {
     display:block;
    }