如何在 parent 有滚动条时显示 MegaMenu children？

Question

我使用了一个实现了 MegaMenu 的主题。一切都很好，但是我的根目录比使用的主题的创建者更多的项目，所以我需要滚动（否则主题会损坏）

所以我通过添加 direction: rtl; 和 overflow-y: visible; 添加了一个左滚动条。但是 现在所有 child 元素都隐藏了 ，在 dark-grey 框的右垂直边框后面。

如何才能让 children 可见并且仍然能够滚动？

MegaMenu 可以做到这一点吗？

非常感谢您！

基本HTML结构

<div class="__body">
  <div class="__links-wrapper" style="height: 410.017px;">
    <ul class="__links">
      <li class="__item ">
       <a href="">Baby &amp; Kleinkind</a>
       <!--  CHILDREN START HERE --->
       <div class="__megamenu __megamenu--xl"> 
         <div class="megamenu megamenu--department"> 
           <div class="row">
             <div class="col-4">
               <ul class="megamenu__links megamenu__links--level--0">
                 <li class="megamenu__item megamenu__item--with-submenu">
                   <a href="">Baby Badebedarf</a>
                   <ul class="megamenu__links megamenu__links--level--1">
                     <li class="megamenu__item"><a href="">Babybadewannen</a></li>
                     <li class="megamenu__item"><a href="">Shampoo-Schutzschilder</a></li>

Answer 1

我通过添加这个 CSS:

让它工作

顺序是从外到内：

    .departments {
        position: relative;
     }   
    .departments__body {
        top: 0;
        position: absolute;
     }   
    
    .departments--opened .departments__links-wrapper {
        overflow-y: scroll;
        direction: rtl;
    }
    
    .departments__links {
        position: static;
    }
    .departments__megamenu { 
        position: absolute;
        top: 0;
        height: 100%;
        visibility: hidden;
        direction: ltr;
    }
    .megamenu .megamenu megamenu--department {
        direction: ltr;  
    }

如何在 parent 有滚动条时显示 MegaMenu children？

How to show MegaMenu children while parent has scrollbar?

html

css

megamenu

如何才能让 children 可见并且仍然能够滚动？

MegaMenu 可以做到这一点吗？