Навигационное меню HTML и CSS woes

Question

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

Например, в приведенной ниже ссылке «test crop» активна, но я не могу нажать на две ссылки ниже этого, я не вижу проблемы в своем HTML или CSS, и я думаю, что ошибка проявляется только в Firefox, здесь является ссылкой http://apigroup.factoryagency.co.uk/browse-products/laminate-board-paper/Test-Crop

Answer 1

Это происходит потому, что у вас есть этот CSS:

.wrapper { 
    clear: both; 
    margin: 0 auto; 
    position: relative; 
    width: 944px; 
    z-index: 1000; 
} 

Есть два дивы из класс обертка, с тем же z-индексом. Первый содержит навигацию. Второй содержит большое содержание тела. Второй, потому что он появляется позже на странице и имеет тот же индекс z, появится поверх первого. Это означает, что он покрывает навигацию, не позволяя ей щелкнуть.

Решение состоит в том, чтобы дать первому div.wrapper HIGHER z-index. Вы можете сделать это, указав ему идентификатор, а затем установив z-index на этот идентификатор.

Answer 2

Ваша проблема заключается в том, что меню навигации является дочерним по отношению к классу .wrapper, а также к основной области содержимого, оба из которых имеют индекс z 999. Элемент .wrapper далее вниз по странице в этом случае будет иметь приоритет z-индекса. Как вы можете видеть на моем скриншоте ниже основной области содержимого, где есть преимущества и совпадение заголовков тестов с навигационным элементом. Я хотел бы добавить дополнительный класс в области основного содержания и указать Z-индекс менее 999.