JSFiddle - React, Tailwind, and code Playground

HTML

<html><head></head><body>
<ul id="menu">
    <li class="category top_level">
         <a href="#" class="category_name top_level_link">top level 1</a>
        <ul class="dropdown">
            <li class="item " >
                <a href="">item 1</a>
            </li>
            <li class="item ">
                <a href="">very long name of item 2</a>
            </li>
        </ul>   
    </li>
    <li class="category top_level">
        <a href="#" class="category_name top_level_link">longer top level name 2</a>
        <ul class="dropdown">
            <li class="item " >
                <a href="">very long name of item 3</a>
            </li>
            <li class="item ">
                <a href="">item 4</a>
            </li>
        </ul>   
    </li>                  
</ul>

</body></html>

CSS

ul{list-style-type:none;}

    #menu li.top_level{
      vertical-align:top;
      zoom:1;
      display:block;
      float:left;
      width:auto;
      position:relative;
      margin:2px;padding:0 1px 0;
    }

    #menu .dropdown{
      float:none;  
      z-index:100;
      position:absolute;
      width:100%;
      height:0;
      overflow:hidden;
      -webkit-transition:height 700ms;-moz-transition:height 700ms;
    }

    #menu .category:hover .dropdown,#menu .category:focus .dropdown{
      -webkit-transition:height 940ms;
      -moz-transition:height 940ms;
      height:auto;
    }
#menu .item a,#menu .category a,#menu .category a:visited,#menu .item a:visited{-webkit-transition:background-color 940ms;-moz-transition:background-color 940ms;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1em;text-decoration:none;display:block;font-family:ColaborateLightRegular;color:#555;padding:.6em;}
#menu a.top_level_link{color:#555;background:none;padding:.4em .6em;}
#menu .dropdown a{text-align:left;}
#menu .item a:hover,#menu .category a:hover,#menu .item a:focus,#menu .category a:focus{text-decoration:none;-webkit-transition:all 0;-moz-transition:all 0;background:#d9d2d2;}
#menu .selected a{background:#d4d2d2!important;}