En général, le hoover (survol de la souris) est géré par le CSS.
S'il faut cliquer, c'est souvent JavaScript (ou jQuery) qui gère le menu via onClick()

Tu peux remplacer onClick par $('#myid:hover') et quelques ajustements (penser à remplacer myid par le id du block menu) pour obtenir un menu qui réagit au survol au lieu du clic.

Pour le 1er cas, là il faut intégrer un peu de jQuery qui remplacera la gestion par le CSS

"Menu Principal" est un block, tu peux modifier le template de celui-ci si tu le désire. ce bloc affiche les menus par défaut, en fonction des droits utilisateurs de chaque module (le menu est dans xoops_version.php de chaque module).
Par défaut les templates de page et blocs sont dans le répertoire /templates de chaque module.
Idéalement il est conseillé d'utiliser la surcharge de template. c'est à dire utiliser le gestionnaire de template de Xoops qui copiera les templates directement dans le thème, de cette façon tu ne perd pas les modifications lors d'une prochaine mise à jour. (admin->modèles, là tu choisis le theme que tu utilise et tu valide). Ensuite tu modifie les templates présents dans le répertoire themes/ton_theme/modules

Pour les menus du haut, les modifications sont à faire dans les templates du thème, directement. (En général /themes/ton_theme/tpl). Dans ces menus tu indique directement les liens vers les pages souvent de type <a href="URL_VERS_PAGE" title="Titre de la page">Titre de la page</a>

une bonne chose de faite.
Pour info, oui, un import fonctionne, mais à éviter si possible, cela te rallongera le temps de ta page d'au moins 200ms (vu qu'un import fait une requête http supplémentaire vers le serveur).

je suis occuper à m'installer un new xoops 2.5.11 pour des tests.
A priori, si tu prend la partie équivalent de dropdown_submenu dans xbootstrap et que tu l'incorpore dans le style.css de xwatch puis tu adapte le menu de xwatch pour qu'il ressemble, ça devrai aller

Je dois écrire un thème avec des menus de toutes façons pour mon client

et faisant peut-être quelques modifs dans le fichier nav-menu.tpl

recupère la partie de css manquante .dropdown-submenu et insère là dans le css de xwatch

pour mettre dans un autre bloc à coté comme tu appelle, il faut normalement appliquer une marge gauche positive (pour la figure que tu as montré) de la largeur de ton menu. Tu peux aussi adjoindre un marge haute négative pour que le bloc "sous-menu" se centre par rapport au "menu principal". Mais attention qu'avec la marge négative tu te retrouve pas avec une partie hors écran.
Demain, ce serai journée off pour moi donc j'aurais un peu plus de temps

Regarde ça : https://getbootstrap.com/docs/5.0/components/navbar/

ca t'expliquera comment faire des navbar.

Perso je les ai réécrit pour que ça fonctionne correctement en me basant sur cette page.
Là je suis pris pour la journée, je te répond en coup de vent.
Je regarderai plus attentivement demain

la première partie correspond au menu burger (quand l'écran est rétréci).
Sinon, tu as une structure plus ou moins classique de <ul><li>menu</li>
<li><ul><li>sous-menu</li>/<ul></li></ul>

Toute les constantes commençant par THEME sont dans /language/english ou /language/french