good day, I do not know if my question is obvious or not but I do not know why when you open the pull-down menu, and select the desired section, the button works and changes the screen to the page that is indicated but does not close automatically , the user must click "X" to close the menu (which is really annoying when browsing) thanks for the contribution!

                                                       Sofia Salinas         

    <nav id="ioMenu">
        <figure id="showMenu" class="ioMenuMovil" onClick="displayMenu()"><img src="imagenes/menu.png" alt="menu"></figure>
        <div id="cardMenu">
            <figure id="hideMenu" class="ioMenuMovil exit" onClick="displayMenu()"><img src="imagenes/exit.png" alt="exit"></figure>
            <figure id="logoMenu"><img src="imagenes/Logo.png" alt="logo diseñadora"></figure>
            <ul>
                <li><a onClick="navSection('home')" href="#">Home</a></li>
                <li><a onClick="navSection('sobreMi')" href="#">Sobre mi</a></li>
                <li><a onClick="navSection('servicios')" href="#">Servicios</a></li>
                <li><a onClick="navSection('portafolio')" href="#">Portafolio</a></li>
                <li><a onClick="navSection('blog')" href="#">Blog</a></li>
                <li><a onClick="displayFormContact('block')" href="#">Contacto</a></li>
            </ul>
        </div>
    </nav>
    <div class="flecha prev" id="prev_section" onClick=displaySection('prev')></div>
    <div class="flecha next" id="next_section"  onClick=displaySection('next')></div>

</header>
</html>


<style>

/*----------------------------MENU--------------*/
 nav .ioMenuMovil{
width: 150px;
height:30px;
margin: 0 0 0 8px;
overflow: hidden;
padding: 0;
position: absolute;
top: 2px;
display: inline-block;
cursor: pointer;
}

nav .ioMenuMovil img{
height: 75%;
padding-top: 4px;
 }

/*-----------------TARJETA EXIT------------------*/
nav #cardMenu{
background: #FFF;
width: 78%;
max-width: 250px;
height: 82vh;
position: absolute;
top: 0;
border-right: 3px solid #A7A7A7;
border-bottom: 3px solid #A7A7A7;
display: none;
z-index: 999;
 }

nav #cardMenu #hideMenu img{
height: 24px;
 }

nav #cardMenu #logoMenu img{
width: 80%;
position: absolute;
top: 70px;
left: 10%;
}

nav #cardMenu ul{
position: absolute;
margin-left: 20%;
top: 270px;
}

nav #cardMenu ul li{
list-style: none;
margin: 10px 0;
}

nav #cardMenu ul li a{
text-decoration: none;
color: #605F5F;
font-size: 1.5em;
padding: 5px 20px 5px 5px;
}
</style>


<script>
 var sections = new Array(5);   
  sections [0] = "home";
  sections [1] = "sobreMi";
  sections [2] = "servicios";
  sections [3] = "portafolio";
  sections [4] = "blog";

function displayMenu() {
var display;
var cardMenu = document.getElementById("cardMenu");
display = cardMenu.style.display;
if(display == "none"){
    cardMenu.style.display = "block";
  }
  else{
    cardMenu.style.display = "none";
  }
}

function displaySection(nav){
var search;
var show;

for (var i=0; i<5; i++){
    search = document.getElementById(sections[i]);
    show = search.style.display;

    if (show == "block"){
        search.style.display = "none";
        if (nav == "next"){
            i++;
            if(i>4) i=0;
        }
        if (nav == "prev"){
            i--;
            if(i<0) i=4;
        }
        search = document.getElementById(sections[i]);
        search.style.display = "block";

        setColor(i);
        break;
    }
}

}

function navSection(nav){
var search;

for (var i = 0; i < 5; i++) {
    search = document.getElementById(sections[i]);
    search.style.display = "none";

    if(sections[i] == nav){
        search.style.display = "block";

        setColor(i);
    }
}

! ( link ) ! ( link )

I do not know if you can see the photo, I'm new to the forum