Подменю меню z-index css ⇐ CSS

[Anonymous]

Во время разработки интерфейса я столкнулся с проблемами z-index в меню и подменю. Меню первого уровня должно быть вверху, а меню второго уровня внизу. В разделе «Электроника» пункты подменю перекрываются. Мне нужно предотвратить это, не удаляя меню. Альтернативно предложите другой метод сохранения внешнего вида меню.
codepen

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

[url=#][/url]





[list]
[*]
[url=#]Products





[/url]


[url=#]Electronics





[/url]


[url=#]Smartphones[/url]

[*]
[url=#]Laptops[/url]

[*]
[url=#]Accessories[/url]

[/list]

[*]
[url=#]Clothing[/url]

[*]
[url=#]Home Appliances[/url]



[*]
[url=#]Services[/url]

[*]
[url=#]Blog[/url]

[*]
[url=#]Contacts[/url]

[*]
[url=#]About Us[/url]








@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,300..800&display=swap");

/* Variables */
:root {
--white: #f9f9f9;
--grey: #d8dcde;
--blue2: #0c3650;
--black: #333;
--border-radius: 20px;
}

/* Global Styles */
body {
background: white;
color: var(--black);
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

li {
list-style: none;
}

.logo a {
color: var(--white);
}

/* Navbar Styles */
.navbar-blue {
height: 80px;
margin: 20px 20px 0;
backdrop-filter: blur(6px);
border-radius: var(--border-radius);
background: var(--blue2);
color: var(--white);
}

.nav-link {
color: var(--white);
font-size: 16px;
font-weight: 500;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-bottom 0.3s;
}

.nav-link:hover {
border-bottom: 2px solid var(--white);
color: var(--white);
}

.menu,
.submenu {
display: none;
}

.submenu-icon svg {
transition: transform 0.3s ease-in-out;
float: right;
}

.menu-item-has-children:hover > a > .submenu-icon svg {
transform: rotate(180deg);
}

.nav-item {
position: relative;
z-index: 2; /* Встановлюємо вищий z-index для елементів першого рівня */
}

.nav-item:hover > .menu {
min-width: 225px;
padding: 25px 0 0 0;
position: absolute;
display: block;
top: 100%;
left: 0;
z-index: 2; /* Меню першого рівня вище підменю */
}

.menu .nav-item {
padding: 0 8px;
background: var(--grey);
}

.menu .nav-item:first-child {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

.menu .nav-item:last-child {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}

.menu .nav-item .nav-link {
color: var(--black);
border-bottom: 1px solid #6d6d6d;
}

.menu .nav-item .nav-link:hover {
color: var(--blue2);
border-bottom: 1px solid #6d6d6d;
}

.menu .nav-item:last-child > .nav-link {
border-bottom: none;
}

.nav-item:hover > .submenu {
min-width: 225px;
padding: 0;
position: absolute;
display: block;
top: 0;
left: 200px;
z-index: 1; /* Підменю нижче за меню першого рівня */
}

.submenu .nav-item {
padding-left: 30px;
}

.submenu .nav-item:first-child {
border-top-right-radius: 20px;
border-top-left-radius: 0;
}

.submenu .nav-item:last-child {
border-bottom-right-radius: 20px;
border-bottom-left-radius: 0;
}

/* Animations */
@keyframes slideDown {
0% {
transform: translateY(-1rem);
opacity: 0;
}

100% {
transform: translateY(0);
opacity: 1;
}
}

.slideDown {
animation-name: slideDown;
animation-duration: 0.3s;
}

@keyframes slideRight {
0% {
transform: translateX(-1rem);
opacity: 0;
}

100% {
transform: translateX(0);
opacity: 1;
}
}

.slideRight {
animation-name: slideRight;
animation-duration: 0.3s;
}

/* Submenu Icon Rotation */
.rotate {
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;
}

Вот как должно выглядеть меню при наведении курсора.screenshot


Подробнее здесь: https://stackoverflow.com/questions/791 ... b-menu-css