My (J3.9.16) website has a horizontally aligned mainmenu for larger screens.
It works fine on my iPad. If I tap on a parent item the child dropdown menu is displayed and if I tap the parent again, the child dropmenu closes.
The same happens on a desktop with a mouse: hovering over the parent opens the child dropdown menu and then moving closes the child dropdown menu (moving the cursor down onto the dropdown menu leaves it open, of course, to enable child item selection).
BUT... clicking on the parent item (which visitors might do if they're not sure whether there's any content on that link) when the child menu is open results in the child menu moving slightly up and to the right but not closing:
The html in Firefox (but also similar in Chrome) code changes from this:
<ul class="nav-child dropdown-menu>
To this:
<ul class="nav-child dropdown-menu show" x-placement="bottom-start" style="position: absolute; transform:translate3d(8px, 30px, 8px, 0px); top: 0px; left 0px; will-change: transform;">
I can't override it with css as inline takes priority.
How can I:
a) stop the browsers adding this code, and b) WITHOUT jQuery, but vanilla Javascript is ok if absolutely necessary, make clicking with a mouse on a parent item close the child dropdown menu?
Thank you.