JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Navigation">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="nav-container">
                    <ul>
                        <li><a href= "javacsript:(0)">Home</a></li>
                        <li><a id="service" href= "javacsript:(0)">Services <i class="caret"></i></a>
                        <div class="row dropdown-content">
                            <div class="col-md-12">
                                 <p>Hello World!</p>
                            </div>
                        </div>  
                        </li>
                        <li><a href= "javacsript:(0)">Categories <i class="caret"></i></a></li>
                        <li><a href= "javacsript:(0)">Shop <i class="caret"></i></a></li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

//I want to show this one when I hover on services

CSS

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 5;
    border: 1px solid #c6c6c6;
}


#service:hover + .dropdown-content {
    display: block; 
}