JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
        <li>Main1
          <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
        </li>
        <li>Main2
          <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
        </li>
        <li>Main3
          <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
        </li>
        <li>Main4
          <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
        </li>
    </ul>

CSS

ul { background:#ccc; border-bottom:5px solid #0c0; height:25px; }
    ul li { cursor:pointer; display:inline-block;
            position:relative; height:30px; 
            zoom:1; _display:inline; }
    ul li:hover ul { display:block; }
    ul li ul { border:0 none; display:none; 
               position:absolute; top:30px; }
    ul li ul li { display:inline; }