css - 如何管理导航菜单的 z-index？

Question

我有带导航菜单的 ASP.NET 应用程序。我使用 HtmlGenericControl 类(“ul”和“li”元素)和 CSS 在代码隐藏 (C#) 中创建了菜单。 CSS 如下所示:

ul.navMenu {
    padding: 0px;
    margin: 0px;
    width: 1000px;
    list-style: none;
    position: relative;
    z-index: 100000;
}

ul.navMenu ul {
    position: absolute;
    left: 0;
    top: 100%;
    display: none;
    padding: 0px;
    margin: 0px;
}

ul.navMenu li {
    display: inline;
    float: left;
    position: relative;
}

ul.navMenu a {
    text-decoration: none;
    padding: 10px 0px;
    width: 100px;
    background: gainsboro;
    color: #010101;
    float: left;
    text-align: center;
    border: 1px solid #ffffff;
    text-transform: uppercase;
}

ul.navMenu a:hover {
    background: #d91703;
    color: #ffffff;
}

ul.navMenu ul a {
    width: 150px;
    font-size: 10px;
}

ul.navMenu ul li {
    display: block;
    margin: 0px;
}

ul.navMenu li:hover ul {
    display: block;
}

ul.navMenu ul ul {
    top: 0;
    left: 100%;
}

ul.navMenu li:hover ul ul {
    display: none;
}

ul.navMenu ul li:hover ul {
    display: block;
}

问题是当我将 z-index 设置为 100000 以使其保持在所有其他元素之上时，会弹出一些窗口并且可以通过它们看到菜单，这看起来不太好。请看下面的屏幕截图，您可以看到白色的弹出窗口和可见的菜单行。菜单不应该可见。它应该在 window 后面。

我不确定如何让它工作。

Answer 1

根据经验……在规划您的应用设计时，请考虑您将要展示的不同层次。想一想哪些将显示在顶部，哪些将与其他一起显示在下方。

当你有了这个时，只需从低到高对不同的层进行编号，并记住没有 z-index 的层的 z-index 为 0。

如果您希望能够在当前层之间“插入” future 层而无需重新编码您的样式，您可以以 10 为步长对它们进行编号。