Html 引导-多级下拉列表

我创建了一个带有一些下拉菜单的导航栏。我想要一些嵌套的下拉列表。由于bootstrap3不支持嵌套下拉列表，我手动创建了它。在显示菜单项的宽屏幕中，这是正常的，但在移动设备大小中，菜单隐藏在切换按钮中，它不能正常工作。我如何在手机尺寸中解决这个问题

HTML:

此外，我的页面方向是

rtl

---

来自W3学校，他们有一个如何进行嵌套下拉引导模式的示例

$（文档）.ready（函数（）{
$（'.dropdown a.test'）。在（“单击”，函数（e）{
$（this.next（'ul'）.toggle（）；
e、 停止传播（）；
e、 预防默认值（）；
});
});

多级下拉列表
在本例中，我们使用jQuery在单击时打开多级下拉列表（请参见下面的脚本部分）。

教程
















如果您有兴趣使用Flexbox制作下拉菜单。。。因此，不允许仅链接答案。填写您自己的答案或删除此内容，并将其放在问题下方的评论部分。明白。行
<nav class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-to-min" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand" id="brand-name"></div>
            </div>
            <div class="collapse navbar-collapse" id="navbar-to-min">
                <ul class="nav navbar-nav">
                    <li><a href="#">خانه</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">دانش‌آموزان<span class="caret"></span></a>
                      <ul class="dropdown-menu">
                          <li><a href="#">مقطع اول</a></li>
                          <li><a href="#">مقطع دوم</a></li>
                          <li><a href="#">مقطع سوم</a></li>
                          <li><a href="#">مقطع چهارم</a></li>
                          <li><a href="#">مقطع پنجم</a></li>
                      </ul>
                  </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">کارکنان<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">مدیریت</a></li>
                            <li class="dropdown"><a href="#" class="dropdown-toggle dropdown-nested" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" tabindex="-1">معاونین<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">معاون اول</a></li>
                                    <li><a href="#">معاون پرورشی</a></li>
                                </ul>
                            </li>
                            <li><a href="#">معلمان</a></li>
                            <li><a href="#">خدمات</a></li>
                        </ul>
                    </li>
                    <li><a href="#">تماس با ما</a></li>
                    <li href="#"><a>همکاری با ما</a></li>
                </ul>
            </div>
         </nav>

.dropdown:focus > .dropdown-menu, .dropdown:active > .dropdown-menu{
    display: block;
}
.dropdown-menu > .dropdown > .dropdown-menu{
    top: 0;
    right: 100%;
    margin-top: -6px;
    margin-right: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}
@media (min-width: 768px) {
    .dropdown-menu > li > .dropdown-nested:after {
        display: block;
        content: " ";
        float: left;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 5px 5px 0;
        border-right-color: #ccc;
        margin-top: 5px;
        margin-left: -10px;
    }
    .dropdown > .dropdown-nested > .caret{
        display: none;
    }
    .dropdown:hover > .dropdown-menu{
        display: block;
    }
    .open > .dropdown-menu{
        display: none;
    }
    .navbar-default .navbar-nav > li > a:active {
        color: #777;
    }
    .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
        color: #777;
        background-color: #f8f8f8;
    }
}