CSS動態子菜單顯示不正確

Question

我已經在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

鏈接

結論

當我簡短地描述問題時，請讓我知道我上面的HTML或CSS代碼在做什么錯？

Answer 1

將第三級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> 

Answer 2

我發現下面的部分弄亂了樣式，元素的位置絕對正確。

-編輯-

在絕對定位時用相同的坐標覆蓋一組元素是一種不好的做法。 原因是元素將全部折疊到單個指定位置上，從而隱藏了除了最頂層的所有元素。

另一種僅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;
            }
        }
    }
}