JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu_acordeon">
	<li><a href="#">Abrir</a>
	<ul>
	<div><a href="#" title="Botón 1">Botón 1</a></div>
	<div><a href="#" title="Botón 2">Botón 2</a></div>
	<div><a href="#" title="Botón 3">Botón 3</a></div>
	<div><a href="#" title="Botón 4">Botón 4</a></div>
	</ul>
    </li>

</div>

CSS

#menu_acordeon{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	color: #FFFFFF;
	text-align: center;
	width: 700px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	list-style: none;
	background-color: #FFFFFF;
	border: none;
	}
 
#menu_acordeon li a{
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	line-height: 45px;
	display: block;
	background-color: #65C6F5;
	}
 
#menu_acordeon li ul li a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	background-color: #FFFFFF;
	}
 
#menu_acordeon li a:hover{
	color: #FFFFFF;
	background-color: #3E3E3E;
	}
 
#menu_acordeon ul{
	margin-bottom: 0px;
	list-style: none;
	height: 0;
	overflow: hidden;
	transition: 1s;
	-moz-transition: 1s;
	-webkit-transition: 1s;
	}
 
#menu_acordeon li:hover ul{
	width: 700px;
	height: 200px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	background-color: #FF0000;
	}
 
#menu_acordeon ul li a{
	background-color: #FFFFFF;
	}
 
#menu_acordeon ul li a:hover {
	color: #32520C;
	background-color: #F5F5F5;
	}