#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;
}<nav id="site-navigation" class="site-nav">
<div id="mega-menu-wrap-primary" class="mega-menu-wrap">
<div class="mega-menu-toggle">
<div class="mega-toggle-blocks-left"></div>
<div class="mega-toggle-blocks-center"></div>
<div class="mega-toggle-blocks-right">
<div class='mega-toggle-block mega-menu-toggle-animated-block mega-toggle-block-0' id='mega-toggle-block-0'>
<button aria-label="Toggle Menu" class="mega-toggle-animated mega-toggle-animated-slider" type="button" aria-expanded="false">
<span class="mega-toggle-animated-box">
<span class="mega-toggle-animated-inner"></span>
</span>
</button>
</div>
</div>
</div>
<ul id="mega-menu-primary" class="mega-menu max-mega-menu mega-menu-horizontal mega-no-js" data-event="hover_intent" data-effect="fade_up" data-effect-speed="200" data-effect-mobile="slide_right" data-effect-speed-mobile="200" data-mobile-force-width="false" data-second-click="go" data-document-click="collapse" data-vertical-behaviour="standard" data-breakpoint="768" data-unbind="true" data-mobile-state="collapse_all" data-mobile-direction="vertical" data-hover-intent-timeout="300" data-hover-intent-interval="100">
<li class="mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-megamenu mega-menu-item-has-children mega-align-bottom-left mega-menu-megamenu mega-has-children mega-menu-item-15" id="mega-menu-item-15">
<a class="mega-menu-link" href="#" aria-expanded="false" tabindex="0">Departments<span class="mega-indicator" aria-hidden="true"></span></a>
<ul class="mega-sub-menu">
<li class="mega-menu-item mega-menu-item-type-widget widget_nav_menu mega-menu-column-standard mega-menu-columns-3-of-9 mega-menu-item-nav_menu-10" style="--columns:9; --span:3" id="mega-menu-item-nav_menu-10">
<div class="menu-department-test-container">
<ul id="menu-department-test" class="menu">
<li id="menu-item-391" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-children menu-item-391">
<a href="#">Departments</a>
<ul class="sub-menu">
<li id="menu-item-392" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-392"><a href="#">Submenu 1</a></li>
<li id="menu-item-393" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-393"><a href="#">Submenu 2</a></li>
</ul>
</li>
<li id="menu-item-394" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-children menu-item-394"><a href="#">Test</a>
<ul class="sub-menu">
<li id="menu-item-395" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-395"><a href="#">Test Submenu</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<button class='mega-close' aria-label='Close'></button>
</div>
</nav>I have a menu with drop down menu items. When I hover over the main menu items, I would like the drop down menu items to appear right at the end of the text of the main menu item. The problem I am running into is that some of the main menu items are only 5 characters and others may be 20 characters, so the below css doesn't align the drop downs correctly. Any help is appreciated.
EDIT Added the code snippet. What I need to happen is when the menu is hovered over, I would like the dropdown to appear right after the arrow, not over to the right.
I think all you need is to define a maximum width on the li...
#mega-menu-wrap-primary .mega-sub-menu li {
list-style: none;
width: max-content;
}