Wie 3 Ebenen tief überlaufen Menü ul> li> ul> li> ul> li

Question

Ich muss ein Menü mit einer Kombination von ul> li> ul erstellen, die horizontal skalieren. Jede UL sollte eine maximale Höhe haben und scrollen, wenn sie überläuft. Wenn Sie den Mauszeiger über li bewegen, sollte ein weiteres Menü auf der rechten Seite geöffnet werden, wenn sich ein anderes ul -Tag darin befindet.

Mit anderen Worten, jedes nachfolgendes Menü unabhängig sein sollte, haben eine eigene Bildlaufleiste, falls erforderlich und/auszublenden um zu zeigen, wenn es ein anderes Menü hat (dieser Teil von js Code funktioniert)

Für dieses Beispiel unten I Schwebemechanismus ignoriert, aber roter Hintergrund sollte den Fluss der Anzeige der nächsten Menüebenen anzeigen.

Problem: Ich kann die 3. Ebene nicht absolut positionieren, sie wird unter der 2. Ebene umgebrochen. Außerdem kann ich den 2. Level nicht überlaufen, so dass ich 2 Scrolls für Level 2 und Level 3 haben könnte. Danke für jede Hilfe.

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

Hier ist eine Lösung reine CSS.

Ich änderte Anzeige keine Opazität 0 die posibility von Fade-In Fade-Out zu bekommen und auch mit dem Halten des Zustands benutzer frindly sein, wenn sie von Eltern auf das Kind

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

gehen

Answer 2

Wenn Sie so etwas wie dies tun wollte, versuchen Sie es einfach.

$(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>