Я хочу создать трехслойное многоуровневое мегаменю, которое расширяет ширину области просмотра при наведении курсора мыш ⇐ CSS

[Anonymous]

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

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

.mega-menu {
width: 100%;
max-width: 1440px;
height: 72px;
background-color: #333;
color: white;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0;
position: relative;
transition: all 0.3s ease;
overflow: hidden;
}

.mega-menu.expanded {
width: 100%;
max-width: 100%;
height: 50vh;
border-radius: 0;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}

.top-section {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 20px;
height: 72px; /* Ensure this matches the height of the navbar */
background-color: #333;
z-index: 10;
}

.dropdown {
position: absolute;
top: 72px;
left: 0;
width: 100vw; /* Ensure it fills the viewport width */
height: calc(50vh - 72px); /* Fill the remaining height of the expanded view */
background-color: #444;
color: white;
display: none;
justify-content: center;
z-index: 5; /* Ensure it appears behind the top-section */
}

.menu-item:hover .dropdown {
display: flex;
}

.dropdown-content {
display: flex;
width: 100%;
height: 100%;
padding: 20px;
justify-content: space-between;
overflow: auto; /* Allow scrolling if content overflows */
}

.dropdown-left, .dropdown-right {
flex: 1;
overflow: auto; /* Allow scrolling if content overflows */
min-width: 0; /* Prevent flex items from exceeding container width */
}

.menu-left, .menu-right {
display: flex;
align-items: center;
}

.menu-left .logo, .menu-left .region-selector, .menu-right .basket, .menu-right .primary-button, .menu-right .text-link {
margin-right: 20px;
}

.menu-items {
list-style: none;
display: flex;
align-items: center;
}

.menu-item {
position: relative;
padding: 20px;
cursor: pointer;
}

.menu-item a {
color: white;
text-decoration: none;
}

.sub-item {
position: relative;
padding: 10px 0;
cursor: pointer;
}

.sub-item a {
color: white;
text-decoration: none;
}

.sub-dropdown {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #666;
color: white;
padding: 10px;
}

.sub-item:hover > .sub-dropdown {
display: block;
}

.sub-dropdown li {
padding: 5px 0;
}

.sub-dropdown a {
color: white;
text-decoration: none;
}

Как я могу изменить свой CSS так, чтобы содержимое заголовка оставалось видимым, когда раскрывающийся список открыт, подэлементы располагались вертикально, а вложенные элементы были видны только тогда, когда вложенные элементы элемент наведен?

Подробнее здесь: https://stackoverflow.com/questions/786 ... h-of-the-v