Как получить элемент html для перекрытия другого, когда он отображается?

Question

#nav ul ul li { 
    display: block; 
    font-color: blue; 
    font-size: 1.5em; 
    z-index: 1; 
    position: relative; 
} 

К примеру, у меня есть мобильный отзывчивый сайт, и главное меню работает нормально, но при изменении размера окна браузера, чтобы быть маленькими, чтобы повторить маленький экран, такие как мобильные телефоны .... Один из пунктов главного меню, у которых есть выпадающий список, отображается поверх других пунктов главного меню. Это означает, что выпадающие элементы главного меню отображаются поверх текста основного меню прямо под ним!

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

Это jsfiddle

Answer 1

Если вы не установите z-index, элементы следуют упорядочения по умолчанию, для которого получает отображается вверху:

Когда элемент не имеет Z-индекс, элементы укладываются в этом порядке (снизу вверх):

1. фона и границ корневого элемента
2. Потомок блоки в нормальном потоке, в порядке появления (в HTML)
3. потомка расположены элементы, в порядке появления (в HTML)

MDN

В вашем HTML , ul для подменю появляется перед HTML для других пунктов меню, поэтому другие пункты меню отображаются поверх фона подменю.

Чтобы исправить это, установите z-index так, что фон из ul будет способствовать:

#nav ul ul { 
    z-index: 1; 
} 

Fixed JSFiddle