WordPress Twenty Twenty-Four主题子菜单全宽设置求助

要让Shop子菜单全屏显示在头部下方，常规的width:100%无效是因为子菜单被父容器的宽度限制住了，需要突破父级约束，用以下CSS实现：

/* 强制Shop子菜单全屏宽度 */
.wp-block-navigation-item:has(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container {
    position: absolute;
    left: 0;
    right: 0;
    width: 100vw;
    top: calc(100% + 10px); /* 与头部保持小间距，可按需调整 */
    z-index: 999;
    box-sizing: border-box;
    padding: 20px; /* 可选，优化内边距提升显示效果 */
}

/* 给导航容器设置相对定位，确保子菜单定位基准正确 */
.wp-block-navigation__container {
    position: relative;
}

注意事项： #

• 如果你的子菜单类名和上述不同，打开浏览器开发者工具（F12），选中子菜单元素，替换为实际的CSS类名即可。
• 若头部是固定定位，需要调整top值，避免子菜单被头部遮挡。
• 若子菜单内容过多出现溢出，可添加overflow: auto属性处理滚动。

内容的提问来源于stack exchange，提问作者Raphael Fiquet RF