当父母有滚动条时如何显示 MegaMenu 孩子？

问题描述

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

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

如何让孩子可见并仍然能够滚动？

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>

解决方法

我通过添加此 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;  
    }

html megamenu