JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar">
    
        <!-- England nav bar start -->
        <li id="engmainnav"><a href="#">England</a>
        <ul id="engsubnav">
            <li class="engli">News</li>
            <li class="engli">Results</li>
            <li class="engli">Table</li>
            </ul>
    </li>
    
    <li id="sanav"><a href="#">Italy</a>
        <ul id="sasubnav">
            <li class="sali">News</li>
            <li class="sali">Results</li>
            <li class="sali">Table</li>

        </ul>
        </li>

CSS

@charset "utf-8";

.body {
font-family: Verdana;
font-size: 12px;}

/* Main Body/Content */
#container {
margin: 0px 0px 0px 10px;
}

#header {
background-color: #000666;
}

/* Navigation Style */
#navbar {
background-color: #000666;
margin: 0px 0px 0px 10px;
}

#engsubnav {
list-style: none;
margin:none;
display: none;

}

#sasubnav{
list-style: none;
margin:none;
display: none;
}

.engli {
margin: 0px 0px 0px 30px;
display:block;
}


li {
list-style: none;
margin: 0px 0px 0px 10px;
display:inline;

}

ul{
display:inline;
}

a {
font-family: Verdana;
text-decoration: none;
font-size: 14px;
color:white;
}

a:visted{
color: white;
}

a:link{
color:white;}

a:active{
color:white;
}

a:hover {
text-decoration: underline;
font-size:16px;
}

JavaScript

// JavaScript Document

    


$(document).ready(function() {
$("#engmainnav").click(function () {
  if ($("#engsubnav").is(":hidden")) {
      $("#engsubnav").slideDown("slow");
  } else {
      $("#engsubnav").hide();
  }
});
$("#engsubnav").mouseleave(function(){
    $('#engsubnav').hide('slow');
});

$("#sanav").click(function () {
  if ($("#sasubnav").is(":hidden")) {
      $("#sasubnav").slideDown("slow");
  } else {
      $("#sasubnav").hide();
  }
});
$("#sasubnav").mouseleave(function(){
    $('#sasubnav').hide('slow');
});
              
});