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>

奇怪的是，此问题仅在此类页面上发生。

URL Page with issue

URL Doesn't have issue

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

Answer 1

从overflow-x: hidden中删除<div id="cms-page"></div>。

Answer 2

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