Подменю CSS Absolute position показывает полосу прокрутки на родительском контейнере

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 Страница с проблемой

URL Не имеет проблемы

Кто-нибудь знает причину этой проблемы?

Answer 1

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

Answer 2

Удалить overflow-x: hidden из <div id="cms-page"></div>.