Выровнять раскрывающееся меню до конца основного меню. ⇐ CSS

[Anonymous]

#mega-menu-wrap-primary {
position: relative;
background-color: #1a1a1a; /* Background color */
font-family: 'Arial', sans-serif;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a {
color: white;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
transition: color 0.3s ease;
}

/* Hover effect */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a:hover {
color: #ff6600;
}

/* Dropdown panel */
#mega-menu-wrap-primary .mega-sub-menu {
background-color: #2c2c2c;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
position: absolute;
}

#mega-menu-wrap-primary .mega-sub-menu li {
list-style: none;
width: max-content;
}

/* Dropdown links */
#mega-menu-wrap-primary .mega-sub-menu a {
color: white;
display: block;
text-decoration: none;
font-size: 14px;
}

#mega-menu-wrap-primary .mega-sub-menu a:hover {
text-decoration: underline;
font-weight: bold;
color: white;
}

/* Responsive hamburger menu (mobile view) */
#mega-menu-wrap-primary .mega-menu-toggle {
background-color: #1a1a1a;
color: white;
border: none;
}

#mega-menu-wrap-primary .mega-menu-toggle:hover {
color: #ff6600;
}

#mega-menu-wrap-primary ul ul ul li {
position: relative;
}

#mega-menu-wrap-primary ul ul ul .sub-menu {
display: none;
position: absolute;
top: 0;
left: 100%; /* Show to the right of parent */
background: linear-gradient(to bottom, rgb(74, 139, 233), rgb(74, 219, 233));
list-style: none;
padding-left: 0;
margin: 0;
min-width: 250px;
z-index: 10000;
}

#mega-menu-wrap-primary ul ul ul > li:hover .sub-menu {
display: block;
}

#mega-menu-wrap-primary ul ul ul .sub-menu li {
padding-left: 10px;
}

#mega-menu-wrap-primary ul ul ul ul ul .sub-menu {
z-index: 100;
}

#mega-menu-wrap-primary li li.has-children > a:after {
content: ' →';
font-size: 15px;
vertical-align: 1px;
}< /code>

• Departments
  
  
  
  
  
  Departments
  
  Submenu 1
• Submenu 2

[*]Test

• Test Submenu

< /code>
< /div>
< /div>
< /p>
У меня есть меню с раскрывающимися пунктами меню. Когда я зависаю над основными пунктами меню, я бы хотел, чтобы пункты выпадающих меню появились прямо в конце текста основного меню. Проблема, с которой я сталкиваюсь, заключается в том, что некоторые из основных элементов меню составляют всего 5 символов, а другие могут составлять 20 символов, поэтому приведенный ниже CSS не выравнивает раскрывающиеся падения правильно. Любая справка приветствуется. Что мне нужно случиться, так это когда меню парировало, я бы хотел, чтобы выпадающий частично появился сразу после стрелки, а не вправо.


Подробнее здесь: https://stackoverflow.com/questions/796 ... -menu-item