JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<style>
    .nav-item-dropdown {
        position: absolute;
        /* other styles ... */
    }
</style>

<div class="nav-wrap">
   <ul>
       <li id="nav-item1" class="nav-item-wrap">Services</li>
       <li id="nav-item2" class="nav-item-wrap">Projects</li>
   </ul>
</div>

<div class="nav-item-dropdown nav-item1-dropdown">
   <!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>

<script>
   $(document).ready(function(){
      jQuery('#nav-item1').hover(function() {
         $('.nav-item1-dropdown').toggle();
      }); 
      jQuery('#nav-item2').hover(function() {
         $('.nav-item2-dropdown').toggle();
      });
   });
</script>