Вертикальная привязка CSS выпадающего списка ⇐ CSS

[Anonymous]

Я реализую это раскрывающееся меню, чтобы при наведении курсора было видно дочерние страницы. Все работает нормально, но я не могу открыть подстолбцы на одной и той же высоте/верху.
По сути, подстолбцы открываются с правой стороны, но начинаются с высоты. родительских страниц, в то время как я хотел бы иметь единообразие и, в идеале, вертикальную привязку, чтобы все они начинались сверху (строка меню, которая установлена ​​как позиция: абсолютный верх: 65 пикселей).
Обратите внимание: я могу редактировать только CSS.
Пока это мой код
/* Basic styling for the menu */
.menu {
list-style: none;
margin: 0;
padding: 0;
position: relative;
display: flex; /* Align menu items in a row */
background-color: #fff; /* Background color of the main menu */
}

/* Styling for menu items */
.menu-item {
position: relative; /* Ensures submenu is positioned relative to this item */
cursor: pointer;
height: 55px;
}

/* Styling for top-level menu links */
.menu-item > a {
text-decoration: none;
color: #153043; /* Color for top-level menu links */
display: block;
padding: 0; /* Remove padding */
margin: 0; /* Remove margin */
height: 100%; /* Ensure the link takes full height of its parent */
}

/* Highlight the menu item on hover */
.menu-item:hover > a {
background-color: #F3F4F5; /* Background color on hover */
color: #153043;
}

/* Hide submenus by default */
.menu-item .sub-menu {
display: none; /* Hide the submenu by default */
position: absolute; /* Position the submenu */
top: 0; /* Align the submenu with the top of the main menu */
left: 100%; /* Position the submenu to the right of the parent menu */
background-color: #fff; /* Background color for submenu */
border: 1px solid #ddd; /* Border around submenu */
z-index: 1000; /* Ensures it appears above other elements */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow */
width: 300px; /* Set the width of the submenu (adjust this width to match the main dropdown) */
padding: 0; /* Remove padding */
margin: 0; /* Remove margin */
box-sizing: border-box; /* Include padding and border in element's total width and height */
}

/* Show submenu on hover */
.menu-item:hover .sub-menu {
display: block; /* Show submenu on hover */
}

/* Ensure submenus align with the top of the main menu */
.menu-item .sub-menu {
top: 0; /* Align submenu with the top of the first item of the main menu */
left: 100%; /* Position submenu to the right of its parent */
}

/* Styling for submenu links */
.sub-menu li {
text-decoration: none;
color: #153043; /* Text color for submenu items */
list-style: none;
padding: 0; /* Remove padding */
margin: 0; /* Remove margin */
}

.sub-menu li a {
text-decoration: none;
color: #153043; /* Text color for submenu links */
display: block;
padding: 0; /* Remove padding */
margin: 0; /* Remove margin */
background-color: #fff; /* Background color for submenu items */
box-sizing: border-box; /* Include padding and border in element's total width and height */
width: 100%; /* Make the submenu items fill the entire submenu */
}

/* Highlight submenu item on hover */
.sub-menu li:hover > a {
background-color: #F3F4F5; /* Background color when hovered */
color: #153043;
}

/* Styling for submenu's nested submenus */
.menu-item .sub-menu .sub-menu {
position: absolute;
top: 0; /* Align the nested submenu with the top of the first submenu */
left: 100%; /* Position the nested submenu to the right of the parent submenu */
display: none;
width: 300px; /* Same width as the main dropdown and first-level submenu */
}

/* Show nested submenu on hover */
.sub-menu li:hover .sub-menu {
display: block;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
left: 100%; /* Position nested submenu to the right */
top: 0; /* Align nested submenu at the top of the first submenu */
}

/* Change the arrow color on hover */
.menu-item:hover > a svg.icon path {
fill: #caa978; /* Changes arrow icon color on hover */
}

/* Change all non-link text and icon colors to #153043 */
.menu-item a, .menu-item svg.icon path, .sub-menu li a, .sub-menu svg.icon path {
color: #153043;
fill: #F3F4F5; /* For SVG icons */
}

.dropdownMenuItem a {
display: flex !important; /* Use flexbox for alignment */
align-items: center; /* Center items vertically */
justify-content: space-between; /* Space between to push SVG to the right */
text-decoration: none; /* Optional: remove underline */
}

.dropdownMenuItem svg {
margin-left: auto; /* This will push the SVG to the right */

}

/* For mobile or smaller screens */
@media (max-width: 768px) {
.menu {
flex-direction: column; /* Stack menu items vertically on mobile */
}

.menu-item .sub-menu {
position: relative; /* Stack submenus below the parent item */
left: 0; /* Align submenu directly under the parent */
width: 100%; /* Full width for better touch experience */
}
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... anchor-css