响应式菜单项CSS不能堆叠在一起

Question

我的移动菜单出现了一个小问题（最大宽度：768像素），请检查-> https://tvo35400.com/

问题似乎很简单：我希望4个菜单项堆叠在一起，而不是散布在整个窗口上。

这是我的导航容器的代码：

#menu-menu-ville {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 0;
    width: 20rem;
    height: 100vh;
    background: #374875;
    transition: 0.6s;
    transform: translateX(-20rem);
    z-index: 999999;
    overflow-y: auto;
}

当我应用{flex-direction: column;}时部分起作用，但是问题是菜单滚动现在是水平的，而不是垂直的。

如果需要，您也可以检查我的jQuery脚本。

$(document).ready(function() {
  (function($) {
     $(".header-icon").click(function(e) {
      e.preventDefault();
      $(".header-icon").css("opacity", "0");
      $(".logo-wrapper").css("right", "2px");
      $("#menu-menu-ville").css("transform", "translateX(0)");
      $(".overlay").css("visibility", "visible");
      $(".overlay").css("opacity", "0.6");
      $(".main-nav").css("translateX", "20rem");
      $("body").css("overflow", "hidden");
    });

    $(".overlay").click(function(e) {
      $(".header-icon").css("opacity", "1");
      $(".logo-wrapper").css("right", "15px");
      $("#menu-menu-ville").css("transform", "translateX(-20rem)");
      $(".overlay").css("visibility", "hidden");
      $(".overlay").css("opacity", "0");
      $("body").css("overflow", "initial");

    });

    $(".menu-item-has-children").click(function(e) {
      $(this).find(".sub-menu").slideToggle();

    });  
  });
});

预先，谢谢您的帮助！

Answer 1

如果您想要这样的东西：

在移动平台上将items:flex-start; align-content:flex-start;添加到＃menu-menu-ville