3レベルのオーバーフロー方法メニューul> li> ul> li

Question

ul> li> ulの組み合わせを使ってメニューを作成する必要があります。各ulは最大高さを持ち、オーバーフローした場合はスクロールする必要があります。 Li上にカーソルを置くと、内部に別のulタグがある場合は、別のメニューが開きます。言い換えれば

、後続の各メニューは、必要であれば、それは自身のスクロールバーの持っている、それは別のメニューを持っている場合/非表示を表示するために、独立していなければならないが（この部分は、JSコードから動作します）

この例では、怒鳴る私はホバリングメカニズムは無視されますが、赤い背景には次のメニューレベルを表示するフローが表示されます。

問題：第3レベルを絶対にすることはできません。第2レベルの下でラップします。また、私はレベル2とレベル3のために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を使用したソリューションです。

私は、フェードイン、フェードアウトの働かを取得すると、親から子へ

.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>

に行くときの状態を保ちながら、よりユーザーfrindlyする不透明度を0に表示を書き換えません

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>