JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li><a href="/" title="HOME">HOME</a></li>
    <li><a href="/" title="ECO ENERGY">ECO ENERGY</a> 

 <ul>
    <li><a href="/Evaluations" title="Evaluations">Evaluations</a></li>
    <li><a href="/Incentives" title="Incentives">Incentives</a></li>
    <li><a href="/HouseFiles" title="House Files">House Files</a></li>
    <li><a href="/UpdateSubmissions" title="Update Submissions">Update Submissions</a></li>

 </ul>      
</li>
    <li><a href="/" title="NEW HOMES">NEW HOMES</a>

<ul>
    <li><a href="/NH" title="Evaluations">Evaluations</a></li>
</ul>        </li>
</ul>

CSS

#menu
    {
    background-color:#206676;
    float:left;
    width:100%; 
    height:60px;
    }

    ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: left;
    }
    ul#menu li {
    display: inline;
    list-style: none;
    padding-left: 15px;
    float:left;
    position:relative;
    }
    ul#menu li a {
        background: none;
        color: #FFF;
        text-decoration: none;
    }
    ul#menu li a:hover {
        color: #FFF;
        text-decoration: none;
    }

    ul#menu ul
    {
    display:none;
   
     position:absolute;
    left:0;
    top:20px;
    }
    ul#menu li
    {
    display:block;
     
    }
    ul#menu li:hover ul {
    display: block;
    width:150px;
    
    }

    ul#menu li:hover ul li a{
    display: block;
    color:red;
    }