text 创世纪中的横向子菜单

Posted 2021-05-03

@media only screen and (min-width: 1024px) {
    .genesis-nav-menu li a:hover {
        text-decoration: none;
    }

    .genesis-nav-menu > li:hover > a,
    .genesis-nav-menu > li > a:hover {
        color: #106ccc;
    }

    .genesis-nav-menu .sub-menu {
        right: 0;
        width: 100%;
        padding-left: calc(50vw - (1280px/2) ); /* where 1280px is the width of the wrap */
        border-top: none;
        background-color: #106ccc;
        font-size: 0.001px; /* to get rid of the horizontal gap between menu items */
    }

    .genesis-nav-menu .sub-menu a {
        border: none;
        color: #fff;
        background-color: transparent;
    }

    .genesis-nav-menu .sub-menu a:hover {
        background-color: #0c539d;
    }
}

https://sridharkatakam.com/horizontal-submenu-genesis/
https://sridharkatakam.com/accessing-parentancestor-menu-item-hovering-submenu-items-genesis/

We can set the .sub-menu to be 100% wide and anchored to the right so the submenu items appear full width with the first item in the submenu aligned at the left edge of the screen.

padding-left: calc(50vw - (1280px/2) )

where 1280px is the width of the wrap.

Menu Settings:
Display Location - After Header Menu