JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

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

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

$("#servicebutton").hover(
  function () {
    $('#services_menu').css("display","block");
  }, 
  function () {
    $('#services_menu').css("display","none");
  });