How to keep the dropdown menu expanded when active

Hello,
You can use the active class to maintain the sub-menu open:
First add this to a sub-theme

    Drupal.behaviors.addClassToParentUl = {
        attach: function (context, settings) {
            $('ul li.active', context).each(function () {
                $(this).closest('ul').addClass('active');
            });
        }
    };

Then you can use some CSS to expand the UL.
nav ul.active {display: Block;}

Best wishes,
Alaa

Choukran Alaa, it works but it also has a weird behaviour, I can not click on the next menu which is just under the selected menu, the others are clickable. I add a video ( EVM.mp4 → ) for you to see what I'm talking about...

By the way, I have added your function code in this file: "drupal8_w3css_subtheme/js/d8w3css-subtheme-script.js"

And the css code in the file I've created to control the menu: "templates/navigation/menu--labelling-system.html.twig"

tnx!

Hello,
Here is the js and css for the sidebar menu.

  Drupal.behaviors.addClassToParentUl = {
    attach: function (context, settings) {
      $('.ul-responsive-v ul li.active', context).each(function () {
        var $closestUl = $(this).closest('ul');

        // Add 'active' and 'show' classes if not present
        if (!$closestUl.hasClass('active')) {
          $closestUl.addClass('active');
        }
        if (!$closestUl.hasClass('show')) {
          $closestUl.addClass('show');
        }
      });
    }
  };

.page-wrapper div.ul-responsive-v,
.page-wrapper div.ul-responsive-v ul {
  width: 100%;
  background: #fffefa;
}

.page-wrapper div.ul-responsive-v ul.active > li.active > a {
  font-weight: bold;
}

.page-wrapper div.ul-responsive-v ul.active,
.page-wrapper .ul-responsive-v ul.ul-parent li.active.li-expanded:hover > ul,
.page-wrapper .ul-responsive-v ul.ul-parent li.active.li-expanded > ul > li.active.li-expanded:hover > ul {
  display: block;
}

.page-wrapper .ul-responsive-v ul.ul-parent li .active.li-expanded:hover ul {
  left: auto;
}

.page-wrapper div.ul-responsive-v ul.active:hover {
  display: block !important;
  opacity: 1 !important
}

.page-wrapper div.ul-responsive-v .ul-parent .li-expanded:hover > ul {
  opacity: 1 !important;
}

Here is a video for the menu Sidebar →
Here is the sub-theme with everything. Sub Theme →

Best wishes,
Alaa

Superb!!!
Thanks as always great master!!

I just have to add a couple of details to make fit width of background colour in some menus

.page-wrapper div.ul-responsive-v ul.active > li.active > a {
  font-weight: bold;
  width: 100%; /* this one added */
}

li.li-expanded:nth-child(4) > a:nth-child(1), li.li-expanded:nth-child(5) > a:nth-child(1) { width: 100%; } /* this one added */

For the second line added, it was the only way I could make it work....

Thanks again

Automatically closed - issue fixed for 2 weeks with no activity.