How to implement a click on a drop-down list on a ready-made menu and combine it with hover on hover?

Question

css

Please tell me how it is possible to implement here in this menu, which is above the banner, displaying the menu when clicked, so that it would work in conjunction with hover. It’s just that in the mobile version it doesn’t work when the menu is clicked, but for these purposes it needs to be implemented, it doesn’t work out in any way ... I tried after focus but it didn’t work out :(
Here is the site itself: link

Answer 1

Mobile browsers do not have a hover event (there is no mouse). They emulate it, and it's not very high quality.
Write a normal menu in js. Instead of a hover, there will be mouseover/out, mouseenter/leave events https://learn.javascript.ru/mousemove-mouseover-mo...
Well, click, respectively.
As an alternative - leave the hover on the desktop, disable the hover styles for the mobile view via media queries, leave only click processing.
You can find many implementation examples.

Answer 2

I tried two scripts but they don't work.

<script>
    let menuElem = document.getElementByClassName('section--main_menu')[0];
    let titleElem = menuElem.querySelector('.menu--dropdown');

    titleElem.onclick = function() {
      menuElem.classList.toggle('open');
    };
  </script>

<script>
$('ul li > a').on('click', function(e) {
  var li = $(this).closest('li');
  if (li.find('ul.menu--dropdown').length) {
    if (!li.hasClass('active')) {
      e.preventDefault();
    }
    li.toggleClass('active');
  }
});
$(document).mouseup(function(e) {
  var div = $('ul li.active');
  if (!div.is(e.target) && div.has(e.target).length === 0) {
    div.removeClass('active');
  }
});
</script>

Can anyone tell me how in my case it is possible to solve the problem with the help of these scripts?