Quiero hacer un menú completamente responsive con varias opciones. Quiero hacer algo similar a lo siguiente. Pero quiero que los botones no tengan un tamaño fijo, ni un número fijo de columnas, y que todos los botones tengan siempre el mismo tamaño, y por supuesto que los botones cubran todo el tamaño de la caja. Estaba tratando de hacerlo con la propiedad flex, pero no funcionó para mí. Te muestro el menú.
Muchas gracias.
Quiero algo como esto [1]: https://i.sstatic.net/1Jok0.png
CSS
#desplegableTitle {
width: 160px;
margin-left: auto;
margin-right: auto;
}
#desplegableTitle a {
background-color: #00857a;
color: #fff;
box-shadow: #aaaaaa 0px 0px 15px 0px;
border-radius: 20px;
padding: 8px;
}
.listaRecursos {
padding: 20px;
border-radius: 20px;
box-shadow: #cccccc 0px 0px 15px 0px;
}
#desplegable {
overflow: hidden;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
}
#desplegable li {
flex: 1 1 0px;
}
Html
<div class="full">
<div class="mainCont">
<ul class="listaRecursos">
<li id="desplegableTitle"><a>Recursos</a></li>
<div id="desplegable">
<li>
<a href="#">Cursos</a>
</li>
<li>
<a href="#">Videos</a>
</li>
<li>
<a href="#">Webinars</a>
</li>
<li>
<a href="#">Revistas</a>
</li>
<li>
<a href="#">Articulos</a>
</li>
<li>
<a href="#">Noticias</a>
</li>
<li>
<a href="#">Grabaciones</a>
</li>
<li>
<a href="#">12
Octubre</a>
</li>
</div>
</ul>
</div>
</div>