Выпадающее меню для входа в систему находится за панелью навигации и создает горизонтальную прокрутку в HTML/CSS ⇐ Html

[Anonymous]

Я работаю над панелью навигации с раскрывающимся меню для входа в систему, но столкнулся с проблемой, из-за которой раскрывающееся меню появляется позади панели навигации при наведении на него курсора. Кроме того, эта проблема вызывает нежелательную горизонтальную прокрутку в браузере.
Вот упрощенная версия моего кода HTML и CSS:

Код: Выделить всё

[*]






[url=#]
[i][/i] Login
[/url]
[list]
[url=#]Sign Up[/url]
[*][url=#]My Profile[/url]
[*][url=#]Orders[/url]
[/list]

Код: Выделить всё

.dropdown:hover > .dropdown-menu {
display: block;
visibility: visible;
opacity: 1;
}

.dropdown-menu {
display: none;
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
background-color: white;
z-index: 1050;
transition: opacity 0.2s ease;
}

Проблема:
При наведении курсора на раскрывающийся список (Вход в систему) раскрывающееся меню появляется за панелью навигации.
Кроме того, это приводит к горизонтальной прокрутке страницы, даже если содержимое соответствует ширине экрана.
Я попробовал настроить z-индекс, но он по-прежнему не работает должным образом. Кто-нибудь знает, как я могу это исправить? Как я могу гарантировать, что раскрывающийся список отображается правильно перед панелью навигации, не вызывая прокрутку?
Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/798 ... rizontal-s