css

Align drop down menu to the end of the main menu item


#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.


Solution

  • 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;
    }