Elementor生成的WordPress多级菜单添加border-radius后子菜单隐藏求助

问题描述 #

我使用WordPress搭配Elementor构建的菜单代码如下：

<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-32242">
    <a href="#" class="wpr-menu-item wpr-pointer-item">
        <span>Partners</span>
        <i class="wpr-sub-icon fas" aria-hidden="true"/>
    </a>
    <ul class="sub-menu wpr-sub-menu wpr-animate-sub">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-32243">
            <a href="https://www.example.com/partners/" class="wpr-sub-menu-item">
                <span>Partner list</span>
                <i class="wpr-sub-icon fas wpr-sub-icon-rotate" aria-hidden="true"/>
            </a>
            <ul class="sub-menu wpr-sub-menu wpr-animate-sub">
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32244">
                    <a href="https://www.example.com/partners/partner1/" class="wpr-sub-menu-item">
                        <span>Partner1</span>
                    </a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32245">
                    <a href="https://www.example.com/partners/partner2/" class="wpr-sub-menu-item">
                        <span>Partner2</span>
                    </a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32246">
                    <a href="https://www.example.com/partners/partner3/" class="wpr-sub-menu-item">
                        <span>Partner3</span>
                    </a>
                </li>
            </ul>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32251">
            <a href="https://www.example.com/become-a-partner/" class="wpr-sub-menu-item">
                <span>Become a partner</span>
            </a>
        </li>
    </ul>
</li>

尝试给子菜单添加border-radius时，使用了以下CSS，但包含Partner1/2/3的三级子菜单直接消失：

ul.sub-menu.wpr-sub-menu {
    border-radius: 5px;
    overflow: hidden;
}

必须添加overflow: hidden;才能让圆角生效，请问如何在保留圆角的同时让三级菜单正常显示？

解决方案 #

方案1：仅给顶级子菜单应用overflow:hidden

问题根源是三级子菜单被父容器（二级子菜单）的overflow:hidden裁剪，因此可以针对性地只给顶级二级子菜单设置样式，排除三级子菜单：

/* 仅选择直接作为顶级菜单子元素的二级子菜单 */
.menu-item-has-children > ul.sub-menu.wpr-sub-menu {
    border-radius: 5px;
    overflow: hidden;
}

/* 三级子菜单取消overflow:hidden，按需设置圆角 */
.menu-item-has-children .menu-item-has-children > ul.sub-menu.wpr-sub-menu {
    border-radius: 5px;
    overflow: visible;
}

方案2：用伪元素实现圆角，替代overflow:hidden

通过伪元素给子菜单添加带圆角的背景层，无需依赖overflow:hidden：

ul.sub-menu.wpr-sub-menu {
    position: relative;
    border-radius: 5px;
    /* 移除overflow:hidden */
}

ul.sub-menu.wpr-sub-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff; /* 替换为你的菜单背景色 */
    border-radius: 5px;
    z-index: -1; /* 将伪元素置于菜单内容下方 */
}

方案3：调整三级子菜单的定位上下文

如果三级子菜单是相对父级li定位的，修改其定位上下文以避免被裁剪：

ul.sub-menu.wpr-sub-menu {
    border-radius: 5px;
    overflow: hidden;
}

/* 让三级子菜单相对更高层级容器定位，避免被父级ul裁剪 */
.menu-item-has-children .menu-item-has-children > ul.sub-menu.wpr-sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
    overflow: visible;
    border-radius: 5px;
}

内容的提问来源于stack exchange，提问作者truba