menu jquery et declenchement par mouseover

salut,

j'utilise un menu avec jquery dans ma page web en jsp

mais mon problème avec ce menu est quant je glisse le curseur dans le menu une partie disparaitre et elle revient dés que je deplace le curseur en dehors de menu

dés départ le menu occupe toute la largeur de la page jsp mais quant je glisse le curseur dans le menu une partie disparaitre ( la partie entre le troisième menu (retrai) et le reste de la page

je veux fixer le menu pour qu'il prend toujours la largeur de la page quelque soit glisser ou non le curseur dans le menu

mon code est le suivant :

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TTNCorresspendance</title>
<script language="javascript"  src="/ProjetVrai/include/jquery-1[1].2.6.js"></script>
<%-- <script language="javascript"  src="jquery/jquery-1[1].2.6.js"></script> --%>
<style>
#menu{ width:900px;  text-align: center; list-style-type:none; margin:0 }
#menu  li.sub{background:#1073B4;border-right:1px  solid; border-left-color:#FFFFFF; }
#menu li{ background: #127EC7; padding:0; margin:1px 1px 0px 0; position:relative;    }
#menu li a,#menu li{ list-style-type:none; float:left; width:120px; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; line-height:25px; font-size:12px; height:25px; font-weight:bold; color:#FFFFFF }
#menu ul{ padding:0; margin:0; display:block; background:#FFFFFF; position:absolute ; left:0; top:25px; display:none; width:110px} 
#menu  li a:hover{ background:#127EC7};
 
</style>
<script language="javascript">
 
function afficher(){
$('#sousmenu').show("slow");
$('#sousmenu1').hide("slow");
$('#sousmenu2').hide("slow");
$('#sousmenu3').hide("slow");
//document.getElementById('sousmenu').style.display='block';
}
 
function cacher(){
$('#sousmenu').hide("slow");
$('#sousmenu1').hide("slow");
$('#sousmenu2').hide("slow");
$('#sousmenu3').hide("slow");
//document.getElementById('sousmenu').style.display='none';
}
 
 
 
 
function afficher1(){
$('#sousmenu1').show("slow");
$('#sousmenu').hide("slow");
$('#sousmenu2').hide("slow");
$('#sousmenu3').hide("slow");
//document.getElementById('sousmenu').style.display='block';
}
 
 
 
function afficher2(){
$('#sousmenu2').show("slow");
$('#sousmenu1').hide("slow");
$('#sousmenu').hide("slow");
$('#sousmenu3').hide("slow");
//document.getElementById('sousmenu').style.display='block';
}
 
 
 
function afficher3(){
$('#sousmenu3').show("slow");
$('#sousmenu1').hide("slow");
$('#sousmenu2').hide("slow");
$('#sousmenu').hide("slow");
//document.getElementById('sousmenu').style.display='block';
}
 
 
document.onclick=cacher;
</script>
 
</head>
<body>
<table style="width: 100%;"  align="center" >
 
  <tr style=" width : 1101px;" bgcolor="#1073B4">
    <td width="660" bgcolor="#1073B4" colspan="2">
	<UL id="menu" style="text-align: center;">
        <LI class="sub" onmouseout="cacher()" onMouseOver="cacher()"><a  href="#">Acceuil</a></LI>
        <LI class="sub"><a  href="#"  onMouseOver="afficher2()">facture
        <UL id="sousmenu2">
            <LI  ><a href="#">nouvelle facture</a></LI>
            <LI><a href="#" >Liste facture</a></LI>
          </UL>
        </LI>
        <LI class="sub"  ><a  href="#"  onMouseOver="afficher3()">retrai</a>
        <UL id="sousmenu3">
 
            <LI><a  href="#">retrai</a></LI>
          </UL>
        </LI>
 
 
    </UL></td>
  </tr>
 
 
</table>
</body>
</html>