Votr avis sur ergonomie web (UI) sur un menu déroulant

Bonjour à tous,

j'aimerai votre avis sur un cas concret d'ergonomie pour un site que j’intègre.j'ai pas encore trouver la bonne solution sur le web donc je viens vous consulter !
voila la problématique:

j'intègre un site en statique avec bootstrap, ma question concerne le menu.
le menu est horizontal en haut de page, avec des sous-menus (horizontaux eux aussi) pour certains onglets de ce menu. On m'impose pour ces sous-menus une hauteur max de 20px.
mon souci ergonomique est que quand je passe en hover sur un onglet du menu, mon sous menu correspondant apparait (jusque la tout va bien!).
le souci d'ergonomie est que quand on souhaite atteindre un des onglets du sous-menu, l'utilisateur va souvent avoir sa souris qui sors des 20px de hauteur du sous-menu, donc ce sous menu se referme. il faut donc faire attention de déplacer sa souris vraiment à l'horizontal sans déborder pour atteindre un onglet du sous-menu (et donc en terme d'UI, c'est vraiment pas top).
je sais que c'est un souci fréquent mais j'ai pas trouver la bonne solution qui convient.

Donc je viens vous demander quelles sont vos solutions ou préconisations pour ce type de souci ergonomique !!

pour ma part, on m'a parler de jouer avec le margin-bottom ou padding-bottom de ma <ul> du sous menu mais ca fonctionne pas.
on m'a aussi conseiller de coder en javascript un timer qui garderai le sous-menu ouvert pendant 2/3 secondes, que l'utilisateur pointe sa souris sur ce sous-menu ou pas, mais je suis pas convaincu.

j’attends vos avis !!!

et pourquoi pas vos solutions !

merci à tous

voici le html tout simple

<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
    <ul class="nav navbar-nav">
        <li>
            <div class="dropdown-submenu">
                <a role="button" data-toggle="dropdown" class="nav_a_menu" data-target="#" href="#">onglet1</a>
                <ul class="dropdown-menu list-inline" role="menu" aria-labelledby="dropdownMenu">
                    <li><a href="#" class="gris">sous-onglet 1</a></li>
                    <li><a href="#" class="gris">sous-onglet 2</a></li>
                    <li><a href="#" class="gris">sous-onglet 3</a></li>
                    <li><a href="#" class="gris">sous-onglet 4</a></li>
                    <li><a href="#" class="gris">sous-onglet 5</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href="#">onglet 2</a>
       </li>

Bonjour,

fabiolm a écrit :
On m'impose pour ces sous-menus une hauteur max de 20px.

Elle est là la vraie problématique. 20 px c'est vraiment peu. Tu est vraiment contraint ? Par qui/quoi/comment/pourquoi ? Tu as moyen de faire changer ça ? Ça serait le mieux... et je vois absolument pas l’intérêt de l'imiter la hauteur d'un sous menu...
Sinon oui un timer en Js ou agrandir la zone de survol avec un padding invisible mais bon ça devient du bricolage...

Un bon moyen pour faire prendre conscience au client d'un écueil ça peut être de le développer et de le laisser naviguer... (et quand il verra que c'est inutilisable et qu'il voudra le changer, il faut rajouter une ligne sur la facture )

Bon courage

bonjour Laurent et merci à toi.

oui la demande vient du client, en fait c'est aussi pour respecter un "ordre de grandeur entre la hauteur du menu (40px) et du sous menu (20px) disons que je peux monter à 30px, ça arrange un peu le problème mais sans plus.

sinon, tu fait comment le padding invisible ? tu le rajoute sur la <ul> du sous menu, la <li>, ou sur le <a> de l'onglet du sous-menu ? car j'ai fait des tests avec padding/margin (bottom car le sous menu est collé au dessous au menu) mais ca m'agrandit forcément la hauteur de mon sous-menu (les fameux 20px). j'ai test aussi un margin négatif mais ca ne marche pas.

Merci à toi

fabiolm a écrit :
sinon, tu fait comment le padding invisible ?

Par défaut un padding est "invisible" hein, j'enttend par là que si tu ne donne pas de background à l'élément, on voit au travers. "transparente" serait alors un meilleur terme.

fabiolm a écrit :
tu le rajoute sur la &lt;ul&gt; du sous menu, la &lt;li&gt;, ou sur le &lt;a&gt; de l'onglet du sous-menu ? car j'ai fait des tests avec padding/margin (bottom car le sous menu est collé au dessous au menu) mais ca m'agrandit forcément la hauteur de mon sous-menu (les fameux 20px).

Compte tenu que ce que j'ai écris au dessous oui ca va forcémzent l'augmenter. Il faut juste discerner le block qui utilisera le survol du bloc qui créera le fond de 20px de haut.
Mais ca apporte d'autres problèmes comme l'accès à ce qui est en dessous... on ne peut pas cliquer vu qu'on est toujours sur le survole du menu mais l'utilisateur peut etre dérouté car la zone est transparente.

fabiolm a écrit :
j'ai test aussi un margin négatif mais ca ne marche pas.i

Non c'est clair là tu t'es égaré

Sinon la solution du timer est pas mal. Je suis tombé sur un vieux tuto avec une solution plus intéressante qui tuilise un petit délai sur la transition css qui fait apparaître/disparaître le menu... le problème c'est qu'il y a aussi le délai à l'apparition et ca c'est chiant. A investiguer en tout cas.