Problemas com onclick

Estou com problemas com uma função que adicionei no onclick de um tag. O objetivo dessa função é esconder/mostrar um menu quando um ícone é clicado. Até ai está funcionando, porém os links desse menu ainda ficam ativos. O texto some junto com a caixa de menu, porém os links não.

HTML:

 <div class="menu">
            <div class="menu-caixa"></div>
            <input type="image" src="../img/menu-icon.png" alt="icone" onclick="abreMenu()" class="imagem-icone">
        </div>
        <div class="menu-nav" id="menu-nav">
            <ul>
                <li class="menu-nav-lista"><a href="../html/index.html" class="menu-nav-link">HOME</a></li>
                <li class="menu-nav-lista"><a href="../html/illustration.html" class="menu-nav-link">ILLUSTRATION</a></li>
                <li class="menu-nav-lista"><a href="../html/writing.html" class="menu-nav-link">WRITING</a></li>
                <li class="menu-nav-lista"><a href="../html/contact.html" class="menu-nav-link">CONTACT</a></li>
            </ul>
        </div>

CSS:

html {
    text-align: center;
    background-color: #170A1C;
    color: #9C95DC;
    position: relative;
}

.conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 39em;
    position: relative;
}

.imagem-icone {
    position: absolute;
    top: .4em;
    width: 2.6%;
    border-radius: 180px;
    z-index: 1000;
    box-shadow: 0 .3em .5em black;
}

.menu-caixa {
    background: linear-gradient(to top, #0b0414, transparent);
    opacity: .5;
    width: 100%;
    height: 3em;
    position: absolute;
    right: 0;
    z-index: 999;
}

.menu-nav {
    position: absolute;
    top: 3em;
    background-color: #0b0414;
    opacity: .8;
    width: 100%;
    height: 3em;
    z-index: 1000;
    transition: 1s;
    opacity: 0;
}

.mostrar {
    display: block;
    opacity: 1;
}

.rodape {
    position: absolute;
    bottom: 0;
    background: linear-gradient(to top, #170A1C, transparent);
    color: #9C95DC;
    opacity: .7;
    font-size: .8em;
    width: 100%;
    height: 2em;
    line-height: 2em;
}

.menu-nav-link {
    text-decoration: none;
    color: #9C95DC;
    opacity: .7;
    font-size: .8em;
}

.menu-nav-lista {
    text-decoration: none;
    display: inline-block;
    padding-right: 3em;
    padding-top: 1em;
    display: none;
}

JS:

function abreMenu() {

    var menu = document.getElementById('menu-nav');

    if (menu.classList.contains('mostrar')) {
        menu.classList.remove('mostrar');
    } else {
        menu.classList.add('mostrar');
    }
}

Agradeço de puderem me ajudar.