JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="menu_bar">
<ul id="main_menu">
<li class="main_button"><a href="">Novedades</a>
<ul>
<li class="bottom_nov">Novedades</li>
</ul>
</li>
<li class="main_button"><a href="">Quienes somos</a>
<ul>
<li class="bottom_qui">Quienes somos</li>
</ul>
</li>
<li class="main_button"><a href="">Colabora</a>
<ul>
<li class="bottom_col">Colabora</li>
</ul>
</li>
<li class="main_button" id="desp_menu"><a href="">Numeros</a>
<ul>
<li class="bottom_num">Numeros anteriores</li>
</ul> 
</li>
</ul>
</nav>

CSS

nav{
margin:0 auto;
font-family:bold 'Roboto Condensed', sans-serif;
font-size:1em;
    background:#f5d8e4;
    position:relative;
}

nav > ul > li{ 
list-style: none;
display: inline-block;

margin-top:1.563em;
margin-left:1.563em;
margin-bottom:1.563em;
}

nav > ul > li > a{
color:inherit;
font-weight:bold;
text-decoration:none;

}

nav > ul > li > a:hover{
background-color:#FF0;
}


nav li ul{
position:absolute;
list-style:none;
text-align:left;
left:0px;
max-height:0px;
overflow:hidden;

-webkit-transition:max-height 0.2s linear;
-moz-transition:max-height 0.2s linear;
transition:max-height 0.2s linear;
}

nav li:hover ul{
overflow:visible; 

}

nav li ul li{
font-size:120px;
font-weight:900;
margin-top:25px;
    margin-left:0;
}
/*
nav li ul .bottom_qui{ 
margin-left:-1em; 
}

nav li ul .bottom_col{
margin-left:-2em; 
}

nav li ul .bottom_num{
margin-left:-3em;
}*/