Html CSS绝对位置子菜单显示父容器上的滚动条

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

它的正常结构是这样的

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

子菜单具有绝对位置

父菜单已溢出：隐藏

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

css逻辑摘要

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

网址

网址

有人知道此问题的原因吗？

从中删除溢出-x:hidden

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

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

Your div structure enclosing problem missing of other pages.

<div id="cms-page" class="cms-page"> **This div close after footer tag.**

Please follow: 
**<div id="cms-page" class="cms-page">**
 <header></header>
 <main></main>
 <footer></footer>
**</div>**