如何管理导航菜单的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以使其保持在所有其他元素之上时，会弹出一些窗口并通过它们显示菜单，这看起来不太好。请看下面的屏幕截图，您可以在其中看到白色弹出窗口和菜单行。菜单不应该是可见的。它应该在窗口后面。

我不确定如何使其发挥作用。

Answer 1

根据经验......在规划您的应用设计时，请考虑您要展示的不同图层。认为哪些会显示在最顶层，而哪些将与其他人一起显示。

如果你有这个，只需将不同的图层从低到高编号，并记住没有z-index的图层的z-index为0。

如果您希望能够＆＃34;插入＆＃34;未来不需要重新编码样式的未来图层之间的层数，您可以按10步进行编号。