带有子菜单的移动菜单

Question

创建用于移动设备的下拉菜单时出现问题。其中一项具有三个子菜单，它们可在台式机上运行，​​但不能在移动设备上运行。基本上，我在显示子菜单时会遇到问题。

我试图弄乱主菜单和子菜单的一些不同显示属性，但是没有任何运气。

#main-menu {
        text-align: center;
        width: 100%;
        display: block;
        height: auto;
        margin: 0;
        box-sizing: border-box;
    position:relative;
    }

    #main-menu li {
        display: table;
        box-sizing: border-box;
    }

    #main-menu li a {
        display: block;
        box-sizing: border-box;
        border-bottom: #102d4e solid 1px;
        margin: 0;
        padding: 0;
        height: 6rem;
        position: relative;
        background-color: #0b1b2d;
        vertical-align: middle;
        display: table-cell;
    }

.sub-menu{
    text-align: center;
        width: 100vw;
        display: block;
        height: auto;
        margin: 0;
        box-sizing: border-box;
        position:relative;
    }   


 .sub-menu li {
            box-sizing: border-box;
        width:100%;
        display:block;
    }

    .sub-menu li a {
        box-sizing: border-box;
        border-bottom: #102d4e solid 1px;
        margin: 0;
        padding: 0;
        height: 6rem;
        position: relative;
        background-color: #0b1b2d;
        vertical-align: middle;
    }

我希望他们使用100％的屏幕宽度，并将自己放在父菜单和下面的主菜单项之间。