garder visibles les sous menus

salut a tous. novice dans le js, j'ai réussi un faire un petit menu dynamique en mélangeant html css et js.
Mon problème est, je pense, d'ordre js. :oops:

J'arrive à rendre visible mon sous menu en cliquant sur la rubrique parent; Ce que je voudrais faire est :
1) mon sous menu soit visible au rollover dès lors que l'on passe sur la rubrique parent.
2) que les différents liens du sous menu reste visible en permanence avec son parent après un clique.
3) Et lorsque qu'on clique dans l'un des sous menus, celui-ci reste selected.

:) oui je sais c'est pas mal de chose en même temps.

voici les codes:

html

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
 
		<div id="conteneur_header">
			<nav>
				<div class="logo"></div>
				<ul id="menu">
					<li id="nav_1"><span class="selected"><a href="#">Accueil</a></span></li>
					<li id="nav_2"><span><a href="parent1.html">WD</a></span></li>
					<li id="nav_3"><span><a href="parent2.html">MULTI</a></span></li>
					<li id="nav_4"><span><a href="mailto:">Contact</a></span></li>
				</ul>
				<div class="clear"></div>
			</nav>
		</div>	
		<div class="bandeau_s_header">
			<div class="menu_1">
 
			</div>
			<div class="menu_2">
				<span><a href="pepe.html">INT</a> |</span>
				<span><a href="papa.html">INT2</a> |</span>
				<span><a href="popo.html">INT3</a> |</span>
				<span><a href="toutou.html">INT4</a> |</span>
				<span><a href="titi.html">INT5</a></span>
			</div>
			<div class="menu_3">
				<span><a href="tuto.html">PR1</a> |</span>
				<span><a href="toto.html">PR2</a> |</span>
				<span><a href="tota.html">PR3</a> |</span>
				<span><a href="tutu.html">PR4</a></span>
			</div>
		</div>

code js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
jQuery('#menu li').on('click',function(event)
{
	var id_nav = jQuery(this).attr('id').replace('nav_','');
	console.log(actual);
	if(id_nav <= 3)
	{
		var actual = jQuery('.bandeau_s_header div:visible');
		jQuery('#menu li span.selected').removeClass('selected');
 
		if(actual.length > 0)
		{
			actual.hide();
		}
		jQuery(this).children('span').addClass('selected');
		jQuery('.bandeau_s_header div').eq(id_nav-1).show();
		return false;
	}
 
});

CODE CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
.menu_1 {
	color:#fff;
}
 
.menu_2 {
	color:#fff;
	padding: 3px 0 0 50px;
 
}
 
.menu_3 {
	color:#fff;
	padding: 3px 0 0 400px;
 
}
 
.bandeau_s_header div{
	display:none;
 
}

par avance merci de votre aide.