JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<div id="sub_menu">
<ul>
<li>Item 1
<ul class="sub_1">
<li>Item - Very Long</li>
<li>Item</li>
<li>They will also ensure that the whole process is kept as simple as possible</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul></li>
<li>Item 2
<ul class="sub_1">
<li>Item</li>
<li>Item</li>
<li>Item - Very Long</li>
<li>Item</li>
<li>Item</li>
</ul></li>
<li>Item 3.5
<ul class="sub_1">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul></li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>CSS
#sub_menu {box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
background: none;}
#sub_menu ul {list-style-type: none;margin:0;padding:0;min-width: 300px;}
#sub_menu ul li {background-color:#dedede;position:relative;display:flex;}
.sub_1 {position:absolute;left:100%;top:0px;display: block;min-width: 300px;}
.sub_1 li {display:block;}