Menu desaparece junto com os botões. | Web Design Responsivo: Páginas que se adaptam do mobile ao desk

Boa tarde estou tentando fazer o menu somente com a aula 5, mas quando eu coloco em 600px, o menu mais o resto somem da página.

O código é o mesmo ministrado em aula, alterei somente o HTML base.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" media="screen" href="menu.css">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="container">

            <nav class="barra-nav">

                <button class="menu-abrir">
                    Abre Menu
                </button>

                <button class="menu-fechar">
                    Fecha Menu
                </button>

                <div class="menu">
                    <ul><a href="#" >Masculino
                        <li><a href="#" >Calça</a></li>
                        <li><a href="#" >Short</a></li>
                    </ul>
                    <ul><a href="#" >Feminino</a>
                        <li><a href="#" >Calça</a></li>
                        <li><a href="#" >Short</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>        

    <script src="menu.js"></script>
</body>
</html>

CSS

@media (max-width: 600px) {
    .barra-nav {
        background: #f0f0f0;
        padding: 1em;
        margin: 0;

        height: 100%;
        width: 90%;
        max-width: 320px;

        position: fixed;
        z-index: 1;
        top: 0;
        left: -90%;

        transition: left 0.3s ease-out;
    }
    .menu-ativo .barra-nav {
        left: 0;
    }
}

@media not all and (max-width: 600px) {
    .menu-abrir,
    .menu-fechar {
        display: none;
    }
}

document.querySelector('.menu-abrir').onclick = function() {
  document.documentElement.classList.add('menu-ativo');
};

document.querySelector('.menu-fechar').onclick = function() {
  document.documentElement.classList.remove('menu-ativo');
};

document.documentElement.onclick = function(event) {
  if (event.target === document.documentElement) {
    document.documentElement.classList.remove('menu-ativo');
  }
};