JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" >
        <title>MenuMatic Vertical Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/reset/reset-min.css"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all" charset="utf-8" />
        <link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="screen" charset="utf-8" />
        <!--[if lt IE 7]>
            <link rel="stylesheet" href="css/MenuMatic-ie6.css" type="text/css" media="screen" charset="utf-8" />
        <![endif]-->
</head>
<body>
    
   <div id="container" >           
        
        <!-- BEGIN Menu -->
        <ul id="nav">

            <li><a href="#">Percoidei</a>
        
                <ul>
                    <li><a href="#">Remoras</a>
                        
                    </li>
                    <li><a href="#">Tilefishes</a>
                        
                    </li>
                    <li><a href="#">Bluefishes</a>
                        
                    </li>
                    <li><a href="#">Tigerfishes</a>
                        
                    </li>
        
                </ul>
            </li>
        
            <li><a href="#">Anabantoidei</a>
                <ul>
                    <li><a href="#">Climbing perches</a>
        
                        
                    </li>
                    <li><a href="#">Labyrinthfishes</a>
                        
                    </li>
                    <li><a href="#">Kissing gouramis</a></li>
        
                    <li><a href="#">Pike-heads</a></li>
                    <li><a href="#">Giant gouramis</a></li>
        
                </ul>
            </li>
        
       ...

CSS

/* main menu ul or ol elment */
#nav{
    display:block;
}

#nav li ul { /* second-level lists */
    position: absolute;
    width: 10em;
    margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
 /* lists nested under hovered list items */
#nav li:hover ul{    margin-left: 186px; margin-top:-2.5em;}

/* extra positioning rules for limited noscript keyboard accessibility */

#nav ul{
border-top:1000px solid #000; 
border-bottom:1000px solid #000; 
position:relative; 
top:-965px; 
}