menu flexbox se me comporta de modo extraño con el jquery

[trevol]

Hola amigos, no sabía donde poner este tema porque implica dos tecnologias como son css(flexbox) y jquery. Si hay alguien que sepa en que foro colocarlo mejor que me lo mueva, gracias. Bueno os explico el caso es que tengo un menú principal con sus items puestos en horizopntal y cuando lo pongo en visión más pequeña, para tablet o movil el menú se me pone vertical(un item encima de otro). Lo que pasa es que también lleva una pestalla de menú para que este se expanda o encoja en caso de verse en pantallas pequeñas. Pues bien cuando paso de pantalla pequeña a pantalla grande el menú se queda vertical y se tendría que ver horizontal. Dejo el código.

Código CSS:

.menu{
padding-left:0px;
margin-top: 0;
margin-bottom: 0;
list-style: none;
background: steelblue;
 
 
}
 
@media  (min-width: 768px){
    .menu{
    display: flex;
    
 
    }
 
    .menu li{
    flex: auto;
    text-align: center;
  border-right: 1px solid rgba(0,0,0,0.2);
   
    }
 
    #toggle-menu{
        background: steelblue;
        line-height: 2.5;
        color: aliceblue;
        padding: left;
        font-size: .9em;
        cursor: pointer;
        display:none;
    }
 
}
.menu a{
color: aliceblue;
text-decoration: none;
line-height: 3;
display: block;
font-weight: bold;
font-size: .9em;
}
.menu a:hover{
background: rgba(0,0,0,0.2);
}
.menu li {
 
 
border-bottom: 1px solid rgba(0,0,0,0.2);   
 
}
 
 
#toggle-menu{
background: steelblue;
line-height: 2.5;
color: aliceblue;
padding: left;
font-size: .9em;
cursor: pointer;
 
 
}
 

Código HTML:

<nav>
        <div id="toggle-menu"> MENU </div> 
            <ul class="menu">
                    <li><a href="index.php">home</a></li>
                    <li><a href="productos.php">todos</a></li>
                    <li><a href="productos.php?genero=1">hombre</a></li>
                    <li><a href="productos.php?genero=2">mujer</a></li>
                    <li><a href="productos.php?genero=3">unisex</a></li>   
                    <li><a href="#">login</a></li>
                    <li><a href="#">registro</a></li>
                </ul>
         
            </nav>
 

Código Javascript:

/controlar el toggle menu
$("#toggle-menu").click(function(){
 
    $(this).next().slideToggle();
  
 
 
});
 
$(window).on("resize", function(){
 
    if($(this).width()>768){
 
        $("#toggle-menu").next().show();
  
        
    }
 
 
});