Coder avec jquery un timer sur mon menu

bonjour à tous,
nouveau ici, je viens chercher votre aide !

J'ai un one-page utilisant bootstrap. mon menu est horizontal haut et comporte 3 onglets avec sous-menus(horizontaux eux aussi et ayant une hauteur max de 30px). Les onglets du menus affiche les sou-menu lors du hover sur cet onglet.

Je souhaite ajouter un timer de 2/3 secondes qui se déclenche quand le curseur passe en hover sur mon sous-menu.
le but est que, vu la hauteur restreinte de mon sous-menu, dès qu'on sors de ce champs le sous-menu se rétracte. il faut alors repasser sur l'onglet du menu, et bien veiller à ne pas sortir du champs de mon sou-menu (les 30px de haut) pour atteindre l'onglet souhaité dans ce sous-menu ce qui n'est pas très ergonomique d'un point de vue utilisateur, vous en conviendrez !

j'ai quelques notions en jquery, mais qui ne me suffise pas pour faire ce bout de code.

donc si qqun peut m'aider à le coder ou me donner des pistes ou autres, ça serait top cool ! ;-)

Donc voici mon besoin précis :
au hover sur un onglet du menu, mon sous-menu s'affiche. l'utilisateur pointe sa souris sur la <ul> de mon sous-menu et quand il sort du champs de cette <ul>, mon timer de 3 secondes se déclenche.
mais il faut aussi intégrer le fait que si l'utilisateur passe en hover sur un autre onglet du menu, se timer s'annule pour afficher le sous-menu de ce nouvel onglet, sur lequel le timer se déclenchera, etc ... (ou s'il passe sur un onglet du menu sans sou-menus -onglet 4 et 5- le sous menu de l'onglet précédemment ouvert disparaisse).

après c'est moi qui ai définit cette logique, qui n'est peut être pas la plus adaptée, je suis donc bien évidemment ouvert à d'autres façon de faire si ça vous parait plus simple ou plus pertinent.

J'espère avoir été assez clair, c'est des fois dur de transcrire son besoin ...

Merci d'avance pour vos réponses !!

voici le code simplifié de mon menu (j'ai volontairement viré tous les sélecteurs type id et autre, de façon à avoir un code plus clair, mais aussi pour que vous puissiez placer vos sélecteurs dans le code sur vos réponses):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
<nav class="hidden-xs navbar navbar-fixed-top" role="navigation">
    <div class="container">
        <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" data-target="#" href="#">
                            <i class="fa fa-chevron-down"></i>menu / onglet 1 
                        </a>
                        <!-- @whitespace : sert à enlever l'espace entre les onglets de sous menu -->
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                            <li><a href="#">sous-menu 1 / onglet 1</a></li><!-- @whitespace 
                         --><li><a href="#">sous-menu 1 / onglet 2</a></li><!-- @whitespace 
                         --><li><a href="#">sous-menu 1 / onglet 3</a></li><!-- @whitespace 
                         --><li><a href="#">sous-menu 1 / onglet 4</a></li><!-- @whitespace 
                         --><li><a href="#">sous-menu 1 / onglet 5</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="dropdown-submenu">
                        <a role="button" data-toggle="dropdown" data-target="#" href="#">
                            <i class="fa fa-chevron-down"></i>menu / onglet 2
                        </a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                            <li><a href="#">sous-menu 2 / onglet 1</a></li><!-- @whitespace 
                         --><li><a href="#">sous-menu 2 / onglet 2</a></li><!-- @whitespace 
                         --><li><a href="#">sous-menu 2 / onglet 3</a></li><!-- @whitespace 
                         --><li><a href="#">sous-menu 2 / onglet 4</a></li><!-- @whitespace 
                         --><li><a href="#">sous-menu 2 / onglet 5</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="dropdown-submenu">
                        <a role="button" data-toggle="dropdown" data-target="#" href="#">
                            <i class="fa fa-chevron-down"></i>menu / onglet 3
                        </a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                            <li><a href="#">sous-menu 3 / onglet 1</a></li><!-- @whitespace 
                         --><li><a href="#">sous-menu 3 / onglet 2</a></li><!-- @whitespace 
                         --><li><a href="#">sous-menu 3 / onglet 3</a></li><!-- @whitespace 
                         --><li><a href="#">sous-menu 3 / onglet 4</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">menu / onglet 4</a></li>
                <li><a href="#">menu / onglet 5</a></li>
            </ul>
        </div>
    </div>
</nav>