JSFiddle - React, Tailwind, and code Playground

HTML

<p>Hover over "Link" and "link 2" to see what I mean:</p>
<ul id="navigation">
    <li class="first"><a href="#">Home</a></li>
    <li class="parent"><a href="#">Link</a>
        <ul class="curved">
            <li><a href="#">Sub Link with long text</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
        </ul>
    </li>
    <li class="parent"><a href="#">Link</a>
        <ul class="curved">
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
        </ul>
    </li>
    <li class="parent last"><a href="#">Link 2</a>
        <ul class="curved">
            <li><a href="#">Long_link_no_spaces</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
        </ul>
    </li>
</ul>

CSS

ul#navigation {
    list-style-type:none;
    /*position:absolute; */
    width:970px;
    /*bottom:0px;
    left:0px;*/
}

ul#navigation li {
    float:left;
    width:auto;
    padding:10px;
    margin-right:10px; 
    position:relative;
}

ul#navigation li.first {
    margin-left:10px;
}

ul#navigation li.last {
    margin-right:0;
}

ul#navigation li ul { 
    display:none;
    position:absolute;
    left:0px;
    width:auto;
    /*width:200px; /*uncomment this and the links are on one line*/ 
    z-index:100;
    background:#f7f7f7 url(images/box-bg.gif) repeat-y right;
    border:1px solid #ccc;
    font-size:90%;
    padding:10px 20px 10px 10px;
    overflow:hidden;
    list-style-type:none;
}

ul#navigation li ul li {
    display:block;
    float:none;
    padding:5px;
}

ul#navigation li.parent:hover ul { 
    display:block;
}

ul#navigation a {
    font-weight:bold;
    color:#333333;
    text-decoration:none;
    display:block;
}

ul#navigation a:hover {
    color:#474747;
}