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

Question

我的移动菜单有一个小问题（最大宽度：768px），请继续检查 -> 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