JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
       <ul class="box_li">
            <li class="parent">
                FIRST
                <ul>
                    <li class="parent">
                        FIRST_SUB_1
                        <ul>
                            <li>FIRST_SUB_1_SUB_1</li>
                            <li>FIRST_SUB_1_SUB_2</li>
                            <li>FIRST_SUB_1_SUB_3</li>
                            <li>FIRST_SUB_1_SUB_4</li>
                        </ul>
                    </li>
                    <li>FIRST_SUB_2</li>
                </ul>
            </li>
            <li class="parent">
                SECOND
                <ul>
                    <li>SECOND_SUB_1</li>
                    <li>SECOND_SUB_2</li>
                    <li>SECOND_SUB_3</li>
                    <li>SECOND_SUB_4</li>
                    <li>SECOND_SUB_5</li>
                    <li>SECOND_SUB_6</li>
                    <li>SECOND_SUB_7</li>
                    <li>SECOND_SUB_8</li>
                </ul>
            </li>
            <li class="parent">
                THIRD
            </li>
            <li class="parent">
                FOURTH
                <ul>
                    <li>FOURTH_SUB_1</li>
                    <li>FOURTH_SUB_2</li>
                    <li>FOURTH_SUB_3</li>
                    <li>FOURTH_SUB_4</li>
                    <li>FOURTH_SUB_5</li>
                    <li>FOURTH_SUB_6</li>
                    <li>FOURTH_SUB_7</li>
                    <li>FOURTH_SUB_8</li>
                </ul>
            </li>
            <li class="parent">
                FIFTH
                <ul>
                    <li>FIFTH_SUB_1</li>
                    <li>FIFTH_SUB_2</li>
                    <li>FIFTH_SUB_3</li>
                    <li>FIFTH_SUB_4</li>
                    <li>FIFTH_SUB_5</li>
                    <li>FIFTH_SUB_6</li>
                </ul>
    ...

CSS

body {font-size:10pt;}
ul.box_li li.parent {position:relative;}
ul.box_li li {background-color:#e6e6e6;width:200px;border:1px solid red;list-style-type:none;padding:5px;}
ul.box_li>li ul {display: none;position: absolute;top: 0;left: 100%;}

JavaScript

$("ul.box_li li.parent").hover(function(){
    $(this).children("ul:first").animate({ width: 'toggle'});
});