Выпадающее меню навигации не отображается над выпадающим меню выбора HTML

Question

Мое приложение имеет два типа выпадающего списка. Оба расположены друг на друге.

У меня есть список выпадающих списков с выпадающим списком, но все же он появится за вторым вариантом выпадающего списка, который является распространенным выпадающим меню HTML.

Я хочу, чтобы мое первое выпадающее меню всегда должно появляться спереди.

Answer 1

г-индекс работает только для элементов, которые имеют свой набор позиций.

в следующем примере, 4 дивы, 2 поверх других 2, обратите внимание, как г-индекс Желтой DIV работает в то время как синяя в оленья кожа, потому что желтый имеет установить его положение и синий оленья кожа:

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

UPDATE:

после вашой скрипки, у меня есть плохие новости и хорошие новости:

плохие новости: 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>