title: CSS Absolute position submenu shows scroll bar on parent container
body: <p>I'm working on a WordPress site, its menu has strange issue on one page, the menus on other pages are fine.</p>
  
  <p><strong>Its normal structure is like this</strong> </p>
  
  <pre><code>  &lt;ul class="nav-menu"&gt;
      &lt;li class="menu-item"&gt;&lt;a href="#"&gt;&lt;span class="menu-title"&gt;Main Level 1&lt;/span&gt;&lt;/a&gt;
      &lt;ul class="sub-menu-item" style="width:267.5px;"&gt;
      &lt;li&gt;Sub Item 1&lt;/li&gt;
      &lt;li&gt;Sub Item 1&lt;/li&gt;
  &lt;/li&gt;
   &lt;li class="menu-item"&gt;&lt;a href="#"&gt;&lt;span class="menu-title"&gt;Main Level 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When I mouseover on a menu item which has sub menus, some scrollbars appear. The CSS logic is</p>
  
  <p><strong>submenu have absolute position</strong>, </p>
  
  <p><strong>the parent menu has overflow: hidden</strong></p>
  
  <p><strong>When mouseover parent menu overflow: visible</strong></p>
  
  <p><strong>css logic summary</strong></p>
  
  <pre><code> &lt;style&gt;
      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;
       }
      &lt;/style&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/b9k69.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b9k69.png" alt="enter image description here"></a></p>
  
  <p>The strange thing is, this issue only happen on this kind of pages.</p>
  
  <p>URL <a href="http://www.vavajo.com/product/%E6%84%9B%E5%9C%A8%E5%A4%95%E9%99%BD%E3%81%AE%E9%80%81%E7%A6%AE%E7%B5%84%E5%90%88/" rel="nofollow noreferrer">Page with issue</a></p>
  
  <p>URL <a href="http://www.vavajo.com/" rel="nofollow noreferrer">Doesn't have issue</a></p>
  
  <p>Does someone know the reason for this issue?</p>