JSFiddle - React, Tailwind, and code Playground

by jspence29

HTML

<ul class="main_menu">
  <li id="homebutton"> <a href="#">Home </a></li>
  <li id="servicebutton"> <a href="#" >Services </a></li>
  <li id="packagebutton"> <a href="#" >Packages </a></li>
  <li id="spabutton"> <a href="#">The spa </a></li>
  <li id="productbutton"> <a href="#">Product </a></li>
  <li id="mebutton"> <a href="#">About Me </a></li>
  <li id="contactbutton"> <a href="#">Contact </a></li>
              <div class="submenu">
              <div id="services_menu">
              <ul>
                <li>Services1</li>
                <li>Services2</li>
                <li>Services3</li>
                <li>Services4</li>
                <li>Services5</li>
              </ul>
              </div>
              </div>
</ul>

CSS

body  {
    background-color: purple;
}
ul.main_menu  {
    list-style-type: none;
    text-align: center;
}
ul.main_menu li  {
    margin-left: 20px;
    display: inline;
}
ul.main_menu li a  {
    text-decoration: none;
    color: white;
}
.submenu  {
    height: 20px;
    width: 100%;
}
#services_menu  {
    display: none;
    margin-top: 10px;
}
#services_menu ul {
    list-style-type: none;
    text-align: center;
}
#services_menu ul li  {
    margin-left: 20px;
    display: inline;
}
#service_menu ul li a  {
    text-decoration: none;
    color: white;
}

JavaScript

$(document).ready(function () {
    $("#servicebutton").hover(
        function () {
            $('#services_menu').show();
        }, 
        function () {
            $('#services_menu').hide();
        }
    );
});