html - How to create a multi-level responsive menu?

Question

I want to make a fully responsive menu with various options. I want to do something similar to the following. But I want the buttons to not have a fixed size, nor a fixed number of columns, and that all the buttons always have the same size, and of course that the buttons cover the entire size of the box. I was trying to do it with the flex property, but it didn't work for me. I show you the menu.

Thank you very much.

I want something like this

https://i.stack.imgur.com/Yj0Nf.png

But this happens to me

https://i.stack.imgur.com/dOAq8.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

        <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>

question from:https://stackoverflow.com/questions/66060639/how-to-create-a-multi-level-responsive-menu

Answer 1

Waitting for answers