响应式菜单：在移动视图中显示我的子菜单

Question

我有一个自定义的响应式菜单，我在移动视图中遇到困难。基本上，宽度超过600px，它显示精细，少于它显示汉堡包菜单。这一切都很有效......

....但随后汉堡菜单我希望菜单和子菜单显示为列出，基本上position = static。所以我希望菜单和子菜单同时显示为平面列表。但我正在努力实现这一目标。

我想要的是要在标题下显示的菜单，并转到窗口高度的100％。所以我认为我必须将样式交换为：

@media (max-width: 600px) {

#header{
    position:relative; /* This means I can absolute position my menu under it*/
}

.menu{
    position:absolute;
    background-color:blue;
    top: 83px;
    left:0;
    width:100%;
    height:100%;
    flex-direction:column;
    display:none;
    z-index:1;
}

.sub-menu{
    position:static;
    background-color:blue;
    flex-direction:column;
}
}

..而我最终得到的是3个不同的菜单，而不是1个平面菜单，我不确定我哪里出错了。

这是指向jsfiddle的链接：https://jsfiddle.net/zbu7ahmb/35/

任何想法都会非常感激 - 我的头撞在墙上。