JSFiddle - React, Tailwind, and code Playground

HTML

<div id="section_wrapper">
                    <nav id="navigation_bar">
                        <ul>
                            <li><a href="#">home</a></li>
                            <li><a href="#">products</a>
                                <ul>
                                    <li><a href="#">beans</a></li>
                                    <li><a href="#">tomato</a></li>
                                </ul>
                            </li>
                            <li><a href="#">something</a></li>
                            <li><a href="#">contact</a></li>
                        </ul>
                    </nav>
                </div><!-- section_wrapper END-->

CSS

#section_wrapper {
    
    width: 800px;
    min-height: 100px;
    height: auto;
    margin: 0 auto;    
}

#navigation_bar {
    
    width: 100%;
    min-height: 100px;
    height: auto;
}

/*-------------- styling for navigation bar -------------*/

#navigation_bar ul {
    
    list-style-type: none;
    margin: 0;
    padding:0;
}

#navigation_bar ul a {
    
    text-decoration: none;
}

#navigation_bar > ul > li {
    
    background-color: #66CCFF;
    width: 150px;
    min-height: 20px;
    height: auto;
    float: left;
    
}

#navigation_bar > ul > li > ul {
    
    visibility: hidden;   
    position: absolute;
}

#navigation_bar ul li ul li {
    
    background-color: #CCCCCC;
    width: 150px;
    min-height: 20px;
    height: auto;

}

#navigation_bar ul li:hover ul {
    
    visibility: visible;    
}