JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
                    <ul class="container">
                        <li class="menu">
                            <ul>
                                <li class="button"><a href="#">Menu<br>uno<p class="mas" id="masQuienes">+</p></a></li>
                                <li class="dropdown">
                                    <ul id="nav">
                                        <li class="boton current"><a href="#seccion1">submenu1</a></li>
                                        <li class="boton"><a href="#seccion2">submenu2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
 
                        <li>
                            <ul>
                                <li class="button"><a href="#seccion3">menu2<p class="mas">+</p></a></li>
                                <li class="dropdown">
                                    <ul id="servicosDropdown">
                                        <li class="boton"><a href="#seccion4">submenu3</a></li>
                                        <li class="boton"><a href="#seccion5">submenu4</a></li>
                                        <li class="boton"><a href="#seccion6">submenu5</a></li>
                                        <li class="boton"><a href="#seccion7">submenu6</a></li>
                                        <li class="boton"><a href="#seccion8">submenu7</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
 
                        <li class="menu" id="contactoLi">
                            <ul>
                                <li class="button"><a href="#seccion9">Menu3<p class="mas">+</p></a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>

CSS

ul.container{
    float: left;
    width:255px;
}
ul li{
    margin-right: 10px;
    padding-top: 5px;
    line-height: 19px;
    list-style:none;
    text-align:right;
   
    letter-spacing: 4px;
    font-weight: lighter;
}
li.button a{
    display:block;
    padding-right: 64px;
    font-size:30px;
    height:40px;
    overflow:hidden;
    position:relative;
    
    padding-top: 5px
}
li.button a{
    margin-top: 10px;
    text-decoration:none;
}
.dropdown{
    margin-left: -212px;
    color:#9E1A96;
    display:none;
    width:350px;
}
.dropdown li a{
    font-size: 20px;
    text-decoration: none;
    color:#9E1A96;
    letter-spacing: -1px;
}
.dropdown li a:hover{
    
}
.mas {
    background-color: #9E1A96;
    width: 20px;
    float: right;
    margin-right: -38px;
    margin-top: -30px;
    display: block;
    padding: 8px 5px 8px 8px;
}
#contactoMas {
    background-color: #9E1A96;
    width: 25px;
    float: right;
    margin-right: -35px;
    margin-top: -8px;
    display: block;
    padding-right: 9px;
    padding-bottom: 3px;
    padding:7px 7px 7px 0px;
}
#masQuienes {
    margin-top: -29px;
}
#contactoLi {
    padding-top: 0px;
    height: 50px;
    margin-top: -10px;
}
ul li a p {
    color: #361249;
}
ul li:hover a p{
    background-color: white;
}
li ul li:hover p {
    background-color: white;    
}
ul.seleccionado a { color: yellow; }

JavaScript

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */
 
    /* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
    $.easing.def = "easeOutBounce";
 
    /* Binding a click event handler to the links: */
    $('li.button a').click(function(e){
    
        /* Finding the drop down list that corresponds to the current section: */
        var dropDown = $(this).parent().next();
        
        /* Closing all other drop down sections, except the current one */
        $('.dropdown').not(dropDown).slideUp('slow').parent().removeClass('seleccionado');
        dropDown.slideToggle('slow').parent().addClass('seleccionado');
        
        /* Preventing the default event (which would be to navigate the browser to the link's address) */
        e.preventDefault();
    })
    
});