JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <ul>
        <li>
            <a href="#">Item 1</a>
            <div>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                    <div>
                    <ul>
                        <li><a href="#">Sub Sub Item 1.1.1</a></li>
                        <li><a href="#">Sub Sub Item 1.1.2 A Long one</a></li>
                        <li><a href="#">Sub Sub Item 1.1.3</a></li>
                        <li><a href="#">Sub Sub Item 1.1.4</a></li>
                    </ul>
                    </div>
                </li>
                <li>
                    <a href="#">Sub Item 1.2 Can be long</a>
                    <div>
                    <ul>
                        <li><a href="#">Sub Item 1.2.1</a></li>
                        <li><a href="#">Sub Item 1.2.2</a></li>
                        <li><a href="#">Sub Item 1.2.3</a></li>
                        <li><a href="#">Sub Item 1.2.4</a></li>
                        <li><a href="#">Sub Item 1.2.5</a></li>
                     </ul>
                    <ul>
                        <li><a href="#">Sub Item 1.2.6 From here should be in 2nd col</a></li>
                        <li><a href="#">Sub Item 1.2.7</a></li>
                        <li><a href="#">Sub Item 1.2.8</a></li>
                        <li><a href="#">Sub Item 1.2.9</a></li>
                        <li><a href="#">Sub Item 1.2.10</a></li>
                     </ul>

                    </div>
                </li>
                <li><a href="#">Sub Item 1.3</a></li>
                <li><a href="#">Sub Item 1.4</a></li>
            </ul>
            </div>
        </li>
        <li>
            <span>Item 2</span>
            <div>
            <ul>
                <li><a href="#">Sub Item 2.1</a></li>
                <li><a href="#">Sub Item 2.2 A long one</a></li>
                <li><a href="#">Sub Item 2.3</a></li>
                <li><a href="#">Sub Item 2.4</a></li>
           ...

CSS

#nav {
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #707070;
    line-height: 18px;    
    margin-top: 30px ;
	margin-left: 90px;
	margin-bottom: 20px;
}

#nav ul 
{
  margin: 0px;
  padding: 0px;   
  position: relative;
  background-color: #ffffff;
}

#nav ul li {
    margin: 0px;
    padding: 1px 5px 1px 5px;
    list-style: none;
    white-space: nowrap;
    display: block;
	min-width: 80px;
}

#nav ul li:hover {
    background: #E0E0E0;
}
#nav ul li a {
    text-decoration: none;
    color: #707070;
    display: block;
}

#nav ul div
{
    display: none;
    border-left: 1px solid #ccc;
    position: absolute;
    left: 100%;
    top: 0px;	
	float: left;
	max-height: 100px;
}

#nav ul div ul {
	float: left;
	display: inline;
}

#nav ul li ul li
{
	min-width: 150px;	
}
#nav ul li ul li ul 
{
	display:inline-block;
    float:none;
}

#nav ul li:hover > div {
    display: block;
}