[FIX] website: correctly position the hoverable sub-menus

Before this commit, the sub-menus that appear when the mouse hovers them
were not displayed correctly. The public widget which is in charge of
positioning the sub-menu (`menuDirection`) could not work because the
dropdowns were opened manually (which is not recommended) and so, the
`show.bs.dropdown` event was never triggered which prevented the public
widget from aligning the sub-menu items correctly.

Steps to reproduce the bug:
- Have a long sub-menu in the last position of the navbar.
- In edit mode align the navbar elements to the right.
- Enable the option to have the sub-menus displayed at hover.
- Save the page.

=> When hovering the sub-menu, it opens on the right and overflows the
page while there is enough space on the left.

task-2904507

closes odoo/odoo#115153

Signed-off-by: Bojabza Soukéina (sobo) <sobo@odoo.com>

addons/website/static/src/js/content/menu.js

@@ -641,28 +641,24 @@ publicWidget.registry.hoverableDropdown = animations.Animation.extend({
      * @param {Event} ev
      */
     _onMouseEnter: function (ev) {
-        if (config.device.size_class <= config.device.SIZES.SM) {
+        // The user must click on the dropdown if he is on mobile (no way to
+        // hover) or if the dropdown is the extra menu ('+').
+        if (config.device.size_class <= config.device.SIZES.SM ||
+            ev.currentTarget.classList.contains('o_extra_menu_items')) {
             return;
         }
-
-        const $dropdown = $(ev.currentTarget);
-        $dropdown.addClass('show');
-        $dropdown.find(this.$dropdownToggles).attr('aria-expanded', 'true');
-        $dropdown.find(this.$dropdownMenus).addClass('show');
+        $(ev.currentTarget.querySelector('.dropdown-toggle')).dropdown('show');
     },
     /**
      * @private
      * @param {Event} ev
      */
     _onMouseLeave: function (ev) {
-        if (config.device.size_class <= config.device.SIZES.SM) {
+        if (config.device.size_class <= config.device.SIZES.SM ||
+            ev.currentTarget.classList.contains('o_extra_menu_items')) {
             return;
         }
-
-        const $dropdown = $(ev.currentTarget);
-        $dropdown.removeClass('show');
-        $dropdown.find(this.$dropdownToggles).attr('aria-expanded', 'false');
-        $dropdown.find(this.$dropdownMenus).removeClass('show');
+        $(ev.currentTarget.querySelector('.dropdown-toggle')).dropdown('hide');
     },
 });