导航下拉列表未显示在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>

这里有一个小提琴，所以你可以玩css并看到差异：

Fiddle Example

<强>更新

跟随你的小提琴，我有坏消息和好消息：

坏消息： 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>