.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: blue;

    /* Resolvendo o efeito do float */
    overflow: hidden;
}

/* Deixando os itens da lista
"flutuados" à esquerda 
(na prática, lado a lado) */
.menu li { float: left; }

.menu a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 14px 16px;
}

.menu a:hover {
    background-color: white;
    color: blue;
}

/* Escondendo a opção do item Menu */
.menu li.icone { display: none; }

@media screen and (max-width: 760px){

    /* Escondemos os itens do menu */
    .menu li { display: none; }

    /* Exibimos novamente o item Menu */
    .menu li.icone {
        display: block;
        float: right;
    }

    /* Regra fechada (somente quando
    o .menu estiver com .aberto, ou seja, 
    somente com as duas classes juntas.) */
    .menu.aberto li {
        float: none;
        display: inline;
    }

    /* Quando o menu está aberto, ele
    passa a ser a referência para o posicionamento
    do botão. */
    .menu.aberto { position: relative; }

    /* Posicionando o botão do menu 
    à direita e acima (em relação ao próprio menu) */
    .menu.aberto li.icone {
        position: absolute;
        right: 0;
        top: 0;
    }
}