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

【问题标题】：CSS Absolute position submenu shows scroll bar on parent containerCSS绝对位置子菜单在父容器上显示滚动条
【发布时间】：2018-11-24 14:04:58
【问题描述】：

我在做一个 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

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

【问题讨论】：

标签： html twitter-bootstrap css

【解决方案1】：

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

【讨论】：

【解决方案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>**

【讨论】：