html - 如何在他的父菜单前面打开多级子菜单？

Question

代码:

nav#desktop-nav ul li > ul {
    position: relative;
    margin-top: 0;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    transform: scaleY(0);
    transform-origin: 0 0 0;
    transition: all 0.5s ease 0s;
    width: 20em;
    z-index: 99999;
    background: #002147;
    padding: 0;
    /* left: 5px; */
}
<nav id="desktop-nav">
    <ul>
        <li>
            <div class="dropdown">
                <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="javascript:void(0)">
                    All Courses <span class="caret"></span>
                </a>
                <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                    <li class="dividers" id="top"><i class="fa fa-caret-up"></i></li>
                    <li class="dropdown-submenu">
                        <?php
                            $this->db->select('*');
                            $this->db->from('courses');
                            $query = $this->db->get();
                            $result = $query->result_array();
                            foreach($result as $row)
                            {
                            echo "<a tabindex='-1' href='javascript:void(0)' class='link' id='".$row['id']."'>".$row['main_course_name']."</a>";
                        ?>
                            <ul class="dropdown-menu" id="drop"></ul>
                        <?php
                            }
                        ?>
                    </li>
                    <li class="dividers" id="bottom"><i class="fa fa-caret-down"></i></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

我有一个多级下拉列表。当我点击“类(class)”菜单时，它会打开并在里面显示一个子菜单。在子菜单中有第三个子菜单。那么，我怎样才能在基本菜单前面显示第三个子菜单呢？请帮助我。

谢谢

Answer 1

要在其父级下方打开子菜单，请将 dropdown-submenu 作为 position:relative; 并将 dropdown-menu 作为 position:absolute;