JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <div>
        <div id="m1" class="s_hov"><span>Notícias</span>
        </div>
        <div id="m2"><span>Entrevistas</span>
        </div>
        <div id="m3" class="sub"><span class="sub">Clube</span>
        </div>
        <div id="m4" class="sub"><span class="sub">Futebol</span>
        </div>
        <div id="m5"><span>Modalidades</span>
        </div>
        <div id="m6"><span>SAD</span>
        </div>
        <div id="m7"><span>Bingo</span>
        </div>
    </div>
</div>
<div id="panel">
    <ul class="list2">
        <li id="c1">Orgãos</li>
        <li id="c2">Historial</li>
        <li id="c3">Museu</li>
        <li id="c4">Estádio</li>
        <li id="c5">Comercial</li>
        <li id="c6">Produtos</li>
        <li id="c7">Contactos</li>
        <li id="c8">Palmarés</li>
    </ul>
</div>
<div id="panel2">
    <ul class="list">
        <li id="f1">Plantel</li>
        <li id="f2">Equipa técnica</li>
        <li id="f3">Classificação</li>
        <li id="f4">Futebol Formação</li>
    </ul>
</div>

CSS

#panel, #panel2
{
	font-size:12px;
	height:70px;
	width:100%;
	display:none;
	position:absolute;
	z-index:2;
	text-transform:uppercase;
	background:#87764E;
}
#menu
{
	background-color:#000; 
	height:30px;
	width:100%;
	color:#FFF;
	font-size:12px;
	text-align:right;
	text-transform:uppercase;
}
#menu div{position:relative; right:-5px}
#menu div div:hover{color:#87764E;cursor:pointer;}
.s_hov{background-color:#87764E !important}
.s_hov:hover{color:#fff !important}
#menu div div
{
	padding:5px 10px;
	display:inline-block;
	height:20px;
	-webkit-transform: skew(-17deg); 
    -moz-transform: skew(-17deg); 
    -o-transform: skew(-17deg);
    transform: skew(-17deg);
}
#menu span{
	display:block;
	-webkit-transform: skew(17deg); 
    -moz-transform: skew(17deg); 
    -o-transform: skew(17deg);
    transform: skew(17deg);
}
ul{margin:0}
ul li{list-style:none;}
.list, .list2{margin-left:10%}
.list li, .list2 li
{
    display:inline-block;
    border-bottom:solid 1px; 
    padding-right:10px; 
    padding-bottom:2px;
    margin:5px 10px;
    float:left;
    width:120px;
    text-align:left;
}
.list li:hover, .list2 li:hover{color:#fff; border-color:#000; cursor:pointer;}
.list li:nth-child(2n+1){clear:both}
.list2 li:nth-child(4n+1){clear:both}

JavaScript

m=3;
var menu=7; 
var m3=false;
var m4=false;
function submenu(sub){
        for(nr=1;nr<=menu;nr++){$("#m"+nr).removeClass("s_hov")}
        switch(sub){
        case 2:
          if(!m4){
                $("#panel2").slideDown();
                m4=true;
                $("#m4").addClass("s_hov");
            }
            else{$("#panel2").slideUp(); m4=false;$("#m"+m).addClass("s_hov")}
          break;
        case 1:
          if(!m3){
                $("#panel").slideDown();
                m3=true;
                $("#m3").addClass("s_hov");
            }
            else{$("#panel").slideUp(); m3=false;$("#m"+m).addClass("s_hov")}
          break;
        }
    }
      $("#m3").mouseenter(function(){m3=false;submenu(1)});
      $("#m3").mouseleave(function(){if($("#panel").is(':hover')){m3=false}else{m3=true} submenu(1)});
      $("#panel").mouseleave(function(){m3=true;submenu(1)});


      $("#m4").mouseenter(function(){m4=false;submenu(2)});
      $("#m4").mouseleave(function(){if($("#panel2").is(':hover')){m4=false}else{m4=true} submenu(2)})
      $("#panel2").mouseleave(function(){m4=true;submenu(2)});