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