多级导航菜单不显示第三级

Question

将鼠标悬停在第二级时，我的第三级菜单不显示。我知道这是因为overflow:hidden 的样式在第二级ul，但是，如果我制作overflow:visible，那么max-height 的过渡效果将无法正常工作。我尝试使用overflow-x:visible 制作overflow-y:hidden，这确实允许转换仍然有效，但添加了一个水平滚动条，您需要向右滚动才能看到第三级菜单。如果你能解决这个问题，我还有一个悬赏的问题，我只得到了 1 个糟糕的答案：BOUNTY QUESTION

My jsFiddle及相关代码如下：

#menu li >  ul {
    position:absolute;
    top:auto;
    left:0;
    width:180px;
    max-height:0;
    box-shadow:1px 2px 10px rgba(100, 100, 100, 0.3);
    visibility: hidden;
    z-index:99999;
    overflow:hidden;
    -webkit-transition: max-height 0.2s ease, visibility 0s linear 0.5s;
     -moz-transition: max-height 0.2s ease, visibility 0s linear 0.5s;
     -o-transition: max-height 0.2s ease, visibility 0s linear 0.5s;
     -ms-transition: max-height 0.2s ease, visibility 0s linear 0.5s;
     transition: max-height 0.2s ease, visibility 0s linear 0.5s;
  background: inherit !important;
}
#menu ul li:hover > ul {
    visibility: visible;
    max-height: 216px;
    transition-delay: 0s;
}
#menu li > ul > li > ul {
  position:absolute;
  top:0 !important;
  left:180px !important;
  width:180px;
  overflow:hidden;
  box-shadow:1px 2px 10px rgba(100, 100, 100, 0.3);
  visibility:hidden;
}

html:

<nav id="menu">
    <ul id="main-nav">
        <li id="port"><a href="portfolio.html">Portfolio</a>
            <ul>
                <li id="regular"><a href="#">Regular</a>
                    <ul>
                        <li id="4col"><a href="#">4 columns</a>
                        </li>                        
                    </ul>
                </li>                
            </ul>
        </li>
        <li id="about" class="parent menu-item"><a href="">About</a>            
        </li>
    </ul>
</nav>

Answer 1

将鼠标悬停在ul 元素上时添加overflow:visible。这样做时，过渡仍然会发生，因为溢出在悬停在元素上之前是隐藏的。

Updated Example

#menu ul li > ul:hover {
    overflow:visible;
}