代码之家 › 专栏 › 技术社区 › Ahmer Ali Ahsan

CSS动态子菜单未正确显示

css html javascript

Ahmer Ali Ahsan · 技术社区 · 6 年前

我在中创建了动态菜单ASP.NETWeb窗体应用程序。以下是我的菜单结构:

在其中正确生成子菜单。

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

发行

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

Link

结论

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

2 回复 | 直到 6 年前

Dharmesh Vekariya 6 年前

将三级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>

user10353986 user10353986 6 年前

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

一个不同的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;
            }
        }
    }
}