Javascript CSS动态子菜单未正确显示

我已经在ASP.NETWebForm应用程序中创建了动态菜单。以下是我的菜单结构：

在其中正确生成子菜单

现在我将应用一些CSS使其引人注目

这是我使用SCSS预处理器对其应用CSS后的期望输出

问题

上图中的问题是，子菜单abcd隐藏在abcd2后面。这意味着如果我添加更多的第三级子菜单，那么所有子菜单都隐藏在最后一级子菜单后面

这是我从浏览器控制台复制的动态生成的HTML

<aside class="ah-master-asidebar">
<ul id="menu">
    <li>
        <a class="ah-anchor-tooltip-show" href="javascript:void(0)">
            <i class="fa fa-home fa-lg" aria-hidden="true"></i>
        </a>
        <ul class="sub-menu" style="display: none;">
            <li>
                <a href="/">
                    <strong>Dashboard</strong>
                </a>
            </li>
        </ul>
    </li>
    <li>
        <a class="ah-anchor-tooltip-show" href="javascript:void(0)">
            <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
        </a>
        <ul class="sub-menu" style="display: block;">
            <li>
                <a href="javascript:void(0)">
                    <strong>Setups</strong>
                </a>
                <ul style="display: block;">
                    <li>
                        <a href="/Views/NavigationCreation.aspx">
                            <strong>Navigation Creation</strong>
                        </a>
                        <ul style="display: block;">
                            <li>
                                <a href="javascript:void(0)">
                                    <strong>abcd</strong>
                                </a>
                            </li>
                        </ul>
                        <ul style="display: block;">
                            <li>
                                <a href="javascript:void(0)">
                                    <strong>abcd 2</strong>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul style="display: none;">
                    <li>
                        <a href="/Views/SetupFormCreation.aspx">
                            <strong>Form &amp; Navigation Mapping</strong>
                        </a>
                    </li>
                </ul>
                <ul style="display: none;">
                    <li>
                        <a href="/Views/RoleCreation.aspx">
                            <strong>Role Creation</strong>
                        </a>
                    </li>
                </ul>
                <ul style="display: none;">
                    <li>
                        <a href="/Views/RoleRights.aspx">
                            <strong>Role Rights</strong>
                        </a>
                    </li>
                </ul>
                <ul style="display: none;">
                    <li>
                        <a href="/Views/RoleAssignments.aspx">
                            <strong>Role Assignment</strong>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</aside>

JSFiddle

结论

---

当我简要描述我的问题时，请让我知道我在上面的HTML或CSS代码中做错了什么

我发现下面的部分弄乱了造型，元素完全定位好了

--编辑--

在绝对定位时，用相同的坐标覆盖一组元素是不好的做法。原因是元素将全部折叠到单个指定位置，隐藏除最上面的位置以外的所有元素

一个不同的CSS解决方案是对菜单和子菜单使用flex样式

display: flex; 
flex-direction: column;

---

虽然在您的情况下，这很奇怪，因为您使用的列表元素已经表现出某种灵活的方式

---

原始代码答案

#menu {
    list-style: none;
    padding: 0;
    margin-bottom: 0;

    .sub-menu {
        width: 160px;
        display: none;

        ul {
            padding-left: 6px;
            width: 160px;
            list-style: none;
            padding: 0;

            li {
                position: relative;
                white-space: nowrap;
            }

            li {
                a:hover {
                    background-color: #495057;
                    color: white;
                }
            }
            /* Edited I changed position to relative and pushed it up a bit */
            ul {
                padding-left: 6px;
                position: relative;
                top: -30px;
                left: 200px;
            }
        }
    }
}

---

将第三级html结构更改为在一个

ul

元素中，因此使用此代码

abcd和abcd2都位于同一子菜单选项后面，该子菜单选项不符合逻辑。在scss页面的第54行找到绝对定位的元素。：）它似乎在网络上起作用ide@Gerard子菜单abcd和abcd2是父菜单（导航创建）的子菜单。问题是子菜单abcd隐藏在abcd后面。这就是我的意思。@AhmerAliAhsan在这种情况下，他们应该有自己的

你在我提供的fiddle示例中运行了你的代码吗？如果你这样做了，那么你就不会把它贴在这里。因为没有绝对位置，我们无法在父菜单旁边显示子菜单。是的，我在我制作的fiddle=>fiddle fork上运行了它。另外，使用绝对位置而不使用带值的定位元素也是一种不好的做法。谢谢你的回答。请更新你的小提琴，因为你的代码输出让我困惑

#menu {
    list-style: none;
    padding: 0;
    margin-bottom: 0;

    .sub-menu {
        width: 160px;
        display: none;

        ul {
            padding-left: 6px;
            width: 160px;
            list-style: none;
            padding: 0;

            li {
                position: relative;
                white-space: nowrap;
            }

            li {
                a:hover {
                    background-color: #495057;
                    color: white;
                }
            }
            /* Edited I changed position to relative and pushed it up a bit */
            ul {
                padding-left: 6px;
                position: relative;
                top: -30px;
                left: 200px;
            }
        }
    }
}