javascript - CSS动态子菜单显示不正确

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



在其中正确生成子菜单。

现在，我将应用一些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>

CSS：

.ah-master-asidebar {
height: auto;
width: 50px;
background-color: #222222;
position: fixed;
z-index: 999;
margin: 6px;
color: white;
display: inline-block;
border-radius: 6px;
padding: 10px 0 10px 0;

a {
    padding: 6px;
    color: white;
    display: block;
    text-align: center;
    text-decoration: none;
}

li {
    white-space: nowrap;
}

#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;
                }
            }

            ul {
                padding-left: 6px;
                position: absolute;
                top: 0;
                left: 200px;
            }
        }
    }
}

#menu > li {
    position: relative;
    white-space: nowrap;
    margin: 3px 0;

    .sub-menu {
        position: absolute;
        top: 0;
        left: 50px;
        padding: 0;
        list-style: none;
        padding-left: 6px;
        width: auto;

        li {
            width: 200px;

            a {
                background-color: #222;
            }
        }
    }

    .sub-menu > li:first-child > a {
        background-color: #3276b1;
    }
}

#menu:first-child > li > a.ah-anchor-tooltip-show:hover {
    background-color: #495057;
}
}

JSFiddle

Link

结论

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

最佳答案

将第三级html结构更改为一个ul元素，因此请使用此代码

<ul style="display: block;">
  <li>
    <a href="javascript:void(0)">
      <strong>abcd</strong>
    </a>
  </li>
  <li>
    <a href="javascript:void(0)">
      <strong>abcd 2</strong>
    </a>
  </li>
</ul>

代替

<ul style="display: block;">
  <li>
    <a href="javascript:void(0)">
      <strong>abcd</strong>
    </a>
  </li>
  </ul>
  <ul>
  <li>
    <a href="javascript:void(0)">
      <strong>abcd 2</strong>
    </a>
  </li>
</ul>

showSubmenu();

function showSubmenu() {
  $('#menu li').mouseenter(function () {
    $(this).children('ul').stop().show()
    $('ul .sub-menu > li > ul').stop().show()
  }).mouseleave(function () {
    $(this).children('ul').stop().hide()
    $('ul > .sub-menu > li > ul').stop().hide()
  });
}

.ah-master-asidebar {
    height: auto;
    width: 50px;
    background-color: #222222;
    position: fixed;
    z-index: 999;
    margin: 6px;
    color: white;
    display: inline-block;
    border-radius: 6px;
    padding: 10px 0 10px 0;
    a {
        padding: 6px;
        color: white;
        display: block;
        text-align: center;
        text-decoration: none;
    }
    li {
        white-space: nowrap;
    }
    #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;
                    }
                }
                ul {
                    padding-left: 6px;
                    position: absolute;
                    top: 0;
                    left: 200px;
                }
            }
        }
    }
    #menu > li {
        position: relative;
        white-space: nowrap;
        margin: 3px 0;
        .sub-menu {
            position: absolute;
            top: 0;
            left: 50px;
            padding: 0;
            list-style: none;
            padding-left: 6px;
            width: auto;
            li {
                width: 200px;
                a {
                    background-color: #222;
                }
            }
        }
        .sub-menu > li:first-child > a {
            background-color: #3276b1;
        }
    }
    #menu:first-child > li > a.ah-anchor-tooltip-show:hover {
        background-color: #495057;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

                                <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>
                            <ul style="display: block;">
                                <li>
                                    <a href="javascript:void(0)">
                                        <strong>abcd</strong>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:void(0)">
                                        <strong>abcd 2</strong>
                                    </a>
                                </li>
                            </ul>
                        </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>