在已溢出的父列表前面显示子列表：隐藏的 DIV

Question

I am creating a side menu that will have a sub-list that will be visible on hover. For that purpose, I have the below code.

 #sidebar { width: 160px; position: relative; }.parent { width: 160px; height: 400px; position: relative; overflow-y: scroll; overflow-x: hidden; }.child { height: 0px; overflow:hidden; position: absolute; left: 120px; }.sub_menu:hover.child { height: 100px; width: 300px; background: #DDD; }.sub_menu { position: relative; }

 <div id="sidebar"> <ul class="parent"> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li class="sub_menu">YYYYYYYYYYY <ul class="child"> <li>Need To Show This In Full Width</li> <li>XXXXXXXXXX</li> <li>XXXXXXXXXX</li> <li>XXXXXXXXXX</li> </ul> </li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> <li>XXXXXXXXXXXX</li> </ul> </div>

Problem is that my sub-list is hiding behind the parent DIV because of overflow-y: scroll; overflow-x: hidden; overflow-y: scroll; overflow-x: hidden; that I need also because I am making a fixed height menu so if contain more item then it will show scroll bar in y-axis only.

So is this possible in my upper code?

Answer 1

You can set position: relative to the most external <div> ( #sidebar ) and position the submenu using JavaScript.

 document.querySelectorAll("li.sub_menu").forEach(function(item) { item.addEventListener("mouseover", function() { submenuWrapper = item.querySelector(".child"), menuItemPosTop = (item.offsetTop - document.querySelector("#sidebar > ul").scrollTop) + 20 + "px", menuItemPosLeft = Math.round(item.offsetWidth * 0.75) + "px" submenuWrapper.style.cssText = "top:" + menuItemPosTop + "; left:" + menuItemPosLeft; }) })

 #sidebar { position: relative; } ul { width: 160px; max-height: 400px; overflow-x: hidden; overflow-y: auto; list-style: none; } li { position: static; } li.child { position: absolute; z-index: 10; display: none; } li:hover >.child { display: block; } ul { margin: 1em; color: white; font-family: sans-serif; font-size: 16px; } li { padding: 1em; } li ul { margin: 0; } li.child { cursor: auto; } li.child li { padding: 12px 20px; } li:nth-child(2n) { background: #949494; } li:nth-child(2n+1) { background: #bbbbbb; } li.sub_menu { background: #505050; cursor: pointer; }

 <div id="sidebar"> <ul> <li>XXX XXX XXX XXX</li> <li>XXX XXX XXX</li> <li>XXX XXX</li> <li>XXX</li> <li class="sub_menu">YYYYYYYYYYY <div class="child"> <ul> <li>XXX XXX XXX</li> <li>XXX XXX</li> <li>XXX</li> </ul> </div> </li> <li>XXX XXX XXX XXX</li> <li>XXX XXX XXX</li> <li>XXX XXX</li> <li>XXX</li> <li>XXX XXX XXX XXX</li> <li>XXX XXX XXX</li> <li>XXX XXX</li> <li>XXX</li> </ul> </div>

For the top position, you need to get the position of the item and substract the current scroll position. Then you can add an offset if you wish (20px in this case).

For the left position, you get the width and can use a percentage to determine where it will be shown (like 75% from the left in this case).

Reference: CSS-tricks .