.menu {
    position: relative;
    height: 30px;
}

        .menu nav {
            display: block;
            overflow: hidden;
        }

        .menu nav > a {
            float: left;
            color: #fff;
            transition: background .2s;
            display: block;
        }

       
        /*botón*/
        .menu .drop {
            color: #fff;
            padding: 3px;
            background: rgba(153,153,153,0.8);
            cursor: pointer;
            display: none; /*ocultamos el botón*/
        }

        .menu .drop svg {
            fill: #fff;
            vertical-align: middle;
        }

        @media (max-width: 624px) {
            .menu nav{
                float:right;
            }
            .menu .drop {
                display: inline-block;
                bottom:10px;
            }
            /*volvemos a mostrar el botón*/
            .menu nav { /*ahora nuestro menú es una lista flotante*/
                position: relative;
                z-index: 600;
                background: #1CA5CC;
                min-width: 20rem;
                display: none;
                left: 0;
                width:100%;
            }

            .menu nav > a { /*y los ítems se alinean verticalmente*/
                float: none;
                border: 0 none;
            }

            /*if => open*/
            .menu nav.open {
                display: block; /*el menu aparece*/
                /*top:50px;*/
            }

            .menu .drop.open {
                background: rgba(0,0,0,0.65); /*el boton cambia de color*/
            }
            .mainmenu nav a:hover {border-bottom:none;}
        }