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

标签 javascript html css

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

enter image description here

其中正确生成了子菜单。

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

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

enter image description here

问题

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

这是我从浏览器控制台复制的动态生成的 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>

关于javascript - CSS 动态子菜单显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52325736/

上一篇：html - 覆盖动画的 CSS 类不起作用

下一篇：html - 一个图标在另一个之前，与父 div 的右侧对齐

相关文章：

html - 如何防止输入字段在小型设备上超出父级的宽度？

html - 如何在父 block HTML 的 100% 上显示 block ？

jquery - 如何动态增加jquery对话框的高度和宽度并产生一定的效果

html - CSS 倾斜边缘，边缘周围有外边框

CSS:多属性选择器

javascript - 结合粘性导航和过渡

JQuery 滑动效果不起作用？

css - Material ui 选项卡容器的动态高度

javascript - javascript中声明变量时，默认值是null吗？

JavaScript 名称变量

©2024 IT工具网  联系我们