如何溢出3级菜单ul> li> ul> li> ul> li

Question

我需要使用ul> li> ul的组合来创建菜单，这些菜单可以水平缩放。每个ul应该有一个最大高度，如果溢出则滚动。悬停在li上，如果里面有另一个ul标签，它应该在右侧打开另一个菜单。

换句话说，每个后续的菜单应该是独立的，有它自己的滚动条，如果有必要，并显示/隐藏，如果有另一个菜单（这部分从JS代码的工作）

在这个例子波纹管我忽略悬停机制，但红色背景应显示下一个菜单级别的显示流程。

问题：我不能将第三层定位为绝对，它包含在第二层。此外，我不能溢出第二级，所以我可以有2级和2级的卷轴。 感谢您的帮助。

HTML：

ul.l1--menu, 
 
ul.l2--menu, 
 
ul.l3--menu { 
 
\t position: relative; 
 
\t display: block; 
 
\t padding: 0; 
 
\t float: left; 
 
\t z-index: 1; 
 
\t width: 100px; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
} 
 
.menu { 
 
    position: absolute; 
 
} 
 
li { 
 
\t list-style: none; 
 
\t display: block; 
 
} 
 
li:hover { 
 
    background: red; 
 
} 
 
ul.l1--menu { 
 
\t width: 300px; 
 
\t z-index: 1; 
 
} 
 
ul.l2--menu { 
 
\t margin : 0; 
 
\t left: 100px; 
 
\t width: 200px; 
 
\t z-index: 2; 
 
\t position: absolute; 
 
\t top: 0; 
 
    max-height:100px; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
} 
 
ul.l3--menu { 
 
\t margin : 0; 
 
\t left: 100px; 
 
\t width: 100px; 
 
\t z-index: 3; 
 
\t position: absolute; 
 
\t top: 0; 
 
}

<div class="menu"> 
 
    <ul class=" l1--menu"> 
 
    <li> 
 
     <a href="#">1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">2</a> 
 
     <ul class=" l2--menu"> 
 
     <li> 
 
      <a href="#">a</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">b</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">c</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">d</a> 
 
      <ul class=" l3--menu"> 
 
      <li> 
 
       <a href="#">sub d</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">e</a> 
 
      <ul class=" l3--menu"> 
 
      <li> 
 
       <a href="#">sub e</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">e</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">f</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">g</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">h</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

下面是使用纯CSS的溶液。

我改变显示无人不透明度0获得淡入淡出的posibility，也更加用户frindly在保持从父要子

.menu { 
 
    position: relative; 
 
} 
 

 
ul { 
 
    width: 200px; 
 
    margin: 0; 
 
    color: black; 
 
    list-style:none; 
 
    padding:0; 
 
    max-height:100px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 

 
li { 
 
    padding:0.5em; 
 
} 
 
li:hover{ 
 
    background-color:blue; 
 
    color:white; 
 
} 
 
li .menu { 
 
    position: absolute; 
 
    z-index: 10; 
 
    background-color:lightgrey; 
 
    opacity: 0; 
 
    transition: opacity 0.5s; 
 
} 
 
li:hover > .menu, 
 
.menu:hover { 
 
    opacity: 1; 
 
} 
 

 
li.parent { 
 
    cursor: pointer; 
 
} 
 

 
.level2 { 
 
    top: 0px; 
 
    left: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    <ul> 
 
    <li>Link1</li> 
 
    <li class="parent">Link3... 
 
     <div class="menu level2"> 
 
     <ul> 
 
      <li class="parent">Link31... 
 
      <div class="menu level2"> 
 
       <ul> 
 
       <li>Link 311</li> 
 
       <li>Link 312</li> 
 
       <li>Link 313</li> 
 
       <li>Link 314</li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
      <li>Link 32</li> 
 
      <li>Link 33</li> 
 
      <li>Link 34</li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li>Link2</li> 
 
    
 
    <li>Link1</li> 
 
    <li>Link2</li> 
 
    
 
    </ul> 
 
</div>

时态

Answer 2

如果你想要做一些类似的，只是尝试。

$(function() { 
 
    $('li.parent').on('mouseover', function() { 
 
    var menuItem = $(this); 
 
    var submenuItem = $('.menu', menuItem); 
 
    
 
    var menuItemPos = menuItem.position(); 
 
    
 
    submenuItem.css({ 
 
     top: 0, 
 
     left: menuItemPos.left + Math.round(menuItem.outerWidth()) 
 
    }); 
 
    }); 
 
});

.menu { 
 
    position: relative; 
 
} 
 

 
ul { 
 
    width: 200px; 
 
    margin: 0; 
 
    color: black; 
 
    list-style:none; 
 
    padding:0; 
 
    max-height:100px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 

 
li { 
 
    padding:0.5em; 
 
} 
 
li:hover{ 
 
    background-color:blue; 
 
    color:white; 
 
} 
 
li .menu { 
 
    position: absolute; 
 
    z-index: 10; 
 
    display: none; 
 
    background-color:lightgrey; 
 
} 
 
li:hover > .menu { 
 
    display: block; 
 
} 
 

 
li.parent { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    <ul> 
 
    <li>Link1</li> 
 
    <li class="parent">Link3... 
 
     <div class="menu"> 
 
     <ul> 
 
      <li class="parent">Link31... 
 
      <div class="menu"> 
 
       <ul> 
 
       <li>Link 311</li> 
 
       <li>Link 312</li> 
 
       <li>Link 313</li> 
 
       <li>Link 314</li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
      <li>Link 32</li> 
 
      <li>Link 33</li> 
 
      <li>Link 34</li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li>Link2</li> 
 
    
 
    <li>Link1</li> 
 
    <li>Link2</li> 
 
    
 
    </ul> 
 
</div>