Ejemplo de menú móvil-escritorio

Código CSS Usado

                
                    * {
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
                    }
                    img {
                        max-width: 100%;
                        height: auto;
                    }
                    /* Presentación inicial del menú */
                    .item-menu {
                        list-style: none;
                        margin: .3rem 0;
                    }
                    .item-menu a {
                        display: block;
                        border: 1px solid blueviolet;
                        border-radius: 3px;
                        background-color: lightsteelblue;
                        text-decoration: none;
                        font-weight: bold;
                        padding: .5rem .3rem;
                        color: darkviolet;
                        font-size: 1.2rem;
                    }
                   .icono-menu {
                        font-size: 3rem;
                        color: blueviolet;
                        position: relative;
                    }
                    /* Efecto animación desplegable menú */
                    #ck_menu {
                        display: none;
                    }
                    .menu-ppal {
                        background-color: dodgerblue;
                        transition: all 1s;
                        height: 0;
                        overflow: hidden;
                    }
                    #ck_menu:checked + .menu-ppal {
                        height: 230px;
                    }
                    /* Efecto emergente sobre menú */
                    .nombre-menu {
                        font-size: 2rem;
                        background-color: blueviolet;
                        color: white;
                        padding: .3rem .1rem;
                        border-radius: .3rem;
                        position: absolute;
                        left: 50px;
                        top: 0;
                        transition: all .5s;
                        opacity: 0;
                    }
                    .fa-bars:hover + .nombre-menu {
                        opacity: 1;
                    }
                   @media all and (min-width:768px) {
                       .icono-menu {
                           display: none;
                       }
                       .menu-ppal {
                            height: auto;
                        }
                        .menu-ppal ul {
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-evenly;
                            padding: 0 3rem;
                        }
                        .item-menu {
                            width: 19%;
                            text-align: center;
                        }
                   }