javascript - 导航下拉菜单未出现在 HTML 选择选项下拉菜单上方

Question

我的应用程序有两种类型的下拉列表。两者相互叠加。

我的自定义列表下拉选项具有更高的 z-index，但它仍然会出现在第二个下拉选项后面，这是常见的 HTML 选项下拉。

我希望我的第一个下拉列表始终出现在前面。

Answer 1

z-index 仅适用于已设置位置的元素。

在下面的示例中，4 个 div，其中 2 个在其他 2 个之上，请注意黄色 div 的 z-index 是如何工作的，而蓝色的则没有，因为黄色有它的位置设置而蓝色没有:

div{
    display:block;
    width:100px;
    height:50px;
}
.red{
    background:red;
    position:absolute;
}
.blue{
    background:blue;
    z-index:2;
}
.green{
    background:green;
    position:absolute;
}
.yellow{
    background:yellow;
    position:absolute;
    z-index:2;
}

<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>

这里是 fiddle 中的相同内容，因此您可以尝试使用 css 并查看不同之处:

Fiddle Example

更新:

跟着你的 fiddle ，我有坏消息和好消息:

坏消息:html 下拉选项列表由浏览器呈现为上下文菜单，并且将始终显示在所有其他元素之上，您无法更改它。

好消息:您可以创建自己的自定义下拉列表并将其显示在菜单后面。幸运的是，jQuery UI 使用 jQuery SelectMenu 就可以做到这一点。

您可以下载 jquery Here , 并自定义您自己的 jquery UI 主题 Here (或使用下面示例中的在线链接)

$(function(){
    $("#divisiondrpdwn").selectmenu();
});

ul, li {
    list-style:none;
    margin:0;
    padding:0;
}
.Nav2 ul.Main {
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
    font-size: 100%;
}
.Nav2 ul.Main li {
    float:left;
}
.Nav2 ul.Main li> a {
    text-decoration:none;
    padding:5px 15px;
    color:#00f;
    background:url(sprite.png) no-repeat right 8px #ff0;
    text-transform:uppercase;
    display:block;
    height:18px;
    line-height:18px;
}
/*-----Hover-----*/
 .Nav2 ul.Main li a:hover {
    background:#fc0;
    color:#000;
}
.Nav2 ul.Main li:last-child a, ul.Dropdown a {
    background-image:none;
}
.Nav2 ul.Dropdown {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 9.2em;
    z-index: 1020;
}
.Nav2 ul.Dropdown li {
    text-decoration:none;
    clear:both
}
.Nav2 ul.Dropdown li> a {
    background-image:none;
    display:none;
    padding: 5px 24px;
}
.Nav2 ul.Main li:hover ul.Dropdown li> a {
    display:block;
}
.Nav2 ul.Dropdown li> a:hover {
    background:#000;
    color:#fff;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="Nav2">
    <ul class="Main">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Gallary</a>

            <ul class="Dropdown">
                <li><a href="#">SubMenu</a>
                </li>
                <li><a href="#">SubMenu</a>
                </li>
                <li><a href="#">SubMenu</a>
                </li>
                <li><a href="#">SubMenu</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Testimonials</a>

            <ul class="Dropdown">
                <li><a href="#">SubMenu</a>
                </li>
                <li><a href="#">SubMenu</a>
                </li>
                <li><a href="#">SubMenu</a>
                </li>
                <li><a href="#">SubMenu</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Contact</a>
        </li>
        <li><a href="#">About</a>
        </li>
    </ul>
    <br/>
    <br/>
    <select id="divisiondrpdwn">
        <option value="99">changes</option>
        <option value="6">CPS</option>
        <option value="106">Layout-8</option>
        <option value="284">Layout-9</option>
        <option value="291">Mixed Layouts</option>
        <option value="41">Naya Hai Wah</option>
        <option value="103">New Layout</option>
        <option value="36">Ram</option>
        <option value="39">Try</option>
        <option value="37">xxx</option>
        <option value="273">YD-ID</option>
        <option value="274" selected="">YD-ID1</option>
    </select>