I’m trying to create a mega menu with the following features:
The dropdown container should cover the entire viewport width and half the viewport height. I don’t want the dropdown content to be aligned with the parent item.
The dropdown should display three columns:
The first column contains a heading and description.
The second column contains sub-items stacked vertically.
The third column contains third level items that are only visible when the parent sub-item is hovered over.
The header content (logo, region selector, menu items, basket icon, text link, primary button) should remain visible even when the dropdown is open.
example of the default view attempting example of menu on hover
What I Expected
The dropdown container should cover the entire viewport width and half the viewport height.
The header content (logo, region selector, menu items, basket icon, text link, primary button) should remain visible even when the dropdown is open.
The sub-items should be stacked vertically.
The third level menu items should only be visible when a sub-item is hovered over.
What Actually Happened
The dropdown container covers the viewport width and height correctly.
The header content is not visible when the dropdown is open.
The sub-items are not stacked vertically.
The sub-sub items are visible initially and do not hide until the sub-item is hovered over.
.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;
}
How can I modify my CSS so that the header content remains visible when the dropdown is open, the sub-items stack vertically, and the sub-sub items are only visible when a sub-item is hovered over?