多级导航菜单不显示第3级 [英] Multilevel Nav Menu not showing 3rd level

问题描述

我的菜单的第三级在悬停在第二级时不显示。我知道这是因为 overflow：hidden 的样式是在第二级 ul ，但是，如果我使 overflow：visible ，则 max-height 的过渡效果无法正常工作。我试着用 overflow-x：visible 制作 overflow-y：hidden 但添加了一个水平滚动条，您需要向右滚动以查看第三级菜单。如果你能解决这个问题，我有另一个问题，一个赏金，我只得到了1个不好的答案：

我的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列< / a> 
< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< li id =aboutclass =parent menu-item>< a href =>关于< / a& 
< / li> 
< / ul> 
< / nav> 
   
 
解决方案
添加 overflow：visible ，当悬停在 ul 元素。在这样做时，转换仍然会发生，因为溢出在悬停在元素之前是隐藏的。
 
 
 
  更新示例  
  #menu ul li > ul：hover {
 overflow：visible; 
} 
  
 
the third level of my menu doesn't show up when hovering the 2nd level.  I know that this is because overflow:hidden is styled on the 2nd level ul, however, if I make overflow:visible then the transition effect with max-height doesn't work properly.  I have tried making overflow-y:hidden with overflow-x:visible and that does allow the transition to still work but adds a horizontal scroll bar that you need to scroll to the right to see the 3rd level menu.  If you can solve this, i have another question with a bounty on it that I have only gotten 1 poor answer on: BOUNTY QUESTION

My jsFiddle and the relevant code below:
#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>

解决方案
Add overflow:visible when hovering over the ul element. In doing so, the transition will still take place because the overflow is hidden prior to hovering over the element.

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


                        
这篇关于多级导航菜单不显示第3级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！