html - CSS 绝对位置子菜单在父容器上显示滚动条

Question

我在一个 WordPress 网站上工作，它的菜单在一个页面上有奇怪的问题，其他页面上的菜单都很好。

它的正常结构是这样的

  <ul class="nav-menu">
    <li class="menu-item"><a href="#"><span class="menu-title">Main Level 1</span></a>
    <ul class="sub-menu-item" style="width:267.5px;">
    <li>Sub Item 1</li>
    <li>Sub Item 1</li>
</li>
 <li class="menu-item"><a href="#"><span class="menu-title">Main Level 2</span></a></li>
</ul>

当我将鼠标悬停在具有子菜单的菜单项上时，会出现一些滚动条。 CSS逻辑是

子菜单有绝对位置,

父菜单溢出:隐藏

鼠标悬停父菜单溢出时:可见

css逻辑总结

 <style>
    ul.nav-menu li.menu-item{
    position: relative;
     overflow: hidden;
    }
    ul.nav-menu li.menu-item:hover{
     overflow: visible;
    }
 ul.sub-menu-item{
      position: absolute;
     }
    </style>

奇怪的是，这个问题只发生在这种页面上。

网址 Page with issue

网址 Doesn't have issue

有人知道这个问题的原因吗？

Answer 1

删除 overflow-x: hidden来自 <div id="cms-page"></div> .