Menu CSS - Sous-menu mal aligné sous IE7

Bonjour,
Je viens vers vous pour résoudre un problème d'affichage de mon menu sous IE7.
- Le site en construction est ici
- Le pb est le suivant :
Je veux créer un menu déroulant où la deuxième ligne serait horizontale.
Chaque élément de menu est composé de 2 images; une petite pour la bordure gauche de l'élément et une grande qui se positionne à droite pour remplir et fermer le bouton.
Pour assurer une affichage horizontal de la deuxième ligne, je supprime les information width des items de deuxième niveau.
La deuxième ligne est masquée par l'instruction left:-999em; et apparaît au survol avec l'instruction left:auto;
Jusqu'ici pas de surprise et tout fonctionne à merveille sous FF safari et IE8.
En passant sous IE7, ça se complique ( je parle pas encore d'IE6, chaque chose en son temps ). La deuxième ligne ne s'aligne pas à gauche de l'item parent mais à droite de celui-ci.
Je manipule dans tous les sens mais je n'arrive pas à trouver la faille.
A secoooooouuuuuuursss
Merci pour vos lumières....

Le code du menu CSS

#ja-cssmenu {
	margin: 0; /* all lists */
	padding: 0;
	float: left;
}

#ja-cssmenu ul {
	margin: 0; /* all lists */
	padding: 0;
}

#ja-cssmenu li {
	padding: 0;
	float: left;
	display: block;
	cursor: pointer;
	background-image: url(../../images/tabsblancleft.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 0;
}

#ja-cssmenu li.active {
	padding: 0;
	float: left;
	display: block;
	cursor: pointer;
	background-image: url(../../images/tabsblancleft.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 0;
}

#ja-cssmenu li ul {
	/*width: 16.4em;*/
	/*width: 50em;*/
	position: absolute; /* second-level lists */
	z-index: 99;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	height: auto;
	/*w\idth: 15.9em;*/
}

#ja-cssmenu li ul ul {
	margin: -2em 0 0 14em; /* third-and-above-level lists */
}

#ja-cssmenu li li {
	padding: 0 1em 0 0;
	margin: 0;
	/*width: 14.9em;*/
}


#ja-cssmenu ul a {
	/*width: 14.8em;
	w\idth: 10.8em;*/
}

#ja-cssmenu li:hover ul ul, #ja-cssmenu li:hover ul ul ul,
#ja-cssmenu li.sfhover ul ul, #ja-cssmenu li.havechildsfhover ul ul, #ja-cssmenu li.havechild-activesfhover ul ul, #ja-cssmenu li.activesfhover ul ul,
#ja-cssmenu li.sfhover ul ul ul, #ja-cssmenu li.havechildsfhover ul ul ul, #ja-cssmenu li.havechild-activesfhover ul ul ul, #ja-cssmenu li.activesfhover ul ul ul {
	left: -999em;
}

/* This "unhides" the sub-menus (left: -999em is what hides them) */
#ja-cssmenu li:hover ul, #ja-cssmenu li li:hover ul, #ja-cssmenu li li li:hover ul,
#ja-cssmenu li.sfhover ul, #ja-cssmenu li.havechildsfhover ul, #ja-cssmenu li.havechild-activesfhover ul, #ja-cssmenu li.activesfhover ul,
#ja-cssmenu li li.sfhover ul, #ja-cssmenu li li.havesubchildsfhover ul, #ja-cssmenu li li.havesubchild-activesfhover ul, #ja-cssmenu li li.activesfhover ul,
#ja-cssmenu li li li.sfhover ul, #ja-cssmenu li li li.havesubchildsfhover ul, #ja-cssmenu li li li.havesubchild-activesfhover ul, #ja-cssmenu li li li.activesfhover ul {
	left:auto;
}

/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#ja-cssmenu li a {
	display: block;
	float:left;
	color: #000;
	text-transform:uppercase;
	line-height: normal;
	text-decoration: none;
	background-image: url(../../images/tabsblanc.png);
	background-repeat: no-repeat;
	background-position: 100% 0px;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 2px;
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 8px;
	padding-left: 8px;
}

#ja-cssmenu li a:hover,
#ja-cssmenu li a:active,
#ja-cssmenu li a:focus,
#ja-cssmenu li a.sfhover {
		display: block;
	float:left;
	color: #fff;
	text-transform:uppercase;
	line-height: normal;
	text-decoration: none;
	background-image: url(../../images/tabsnoir2.png);
	background-repeat: no-repeat;
	background-position: 100% 0px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 2px;
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 8px;
	padding-left: 8px;
}

#ja-cssmenu li:hover,
#ja-cssmenu li.sfhover,
#ja-cssmenu li.havechildsfhover,
#ja-cssmenu li.havechild-activesfhover {
	color: #fff;
}

#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
	display: block;
	float:left;
	color: #fff;
	text-transform:uppercase;
	line-height: normal;
	text-decoration: none;
	background-image: url(../../images/tabsnoir2.png);
	background-repeat: no-repeat;
	background-position: 100% 0px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 2px;
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 8px;
	padding-left: 8px;
}

/* 2nd level and above */
#ja-cssmenu li ul {
	margin-top:30px;
}

#ja-cssmenu li ul ul {
	border-top: 1px solid #666;
}

#ja-cssmenu li ul li {
	/*border-top: 1px solid #444;
	background: none;*/
	
}

#ja-cssmenu li ul a {
	display: block;
	float:left;
	color: #fff;
	text-transform:uppercase;
	line-height: normal;
	text-decoration: none;
	background-image: url(../../images/tabsbleu.png);
	background-repeat: no-repeat;
	background-position: 100% 0px;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 2px;
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 8px;
	padding-left: 8px;
}

#ja-cssmenu li.havesubchild,
#ja-cssmenu li.havesubchild-active {
	/*background: url(../../images/bullet2.gif) no-repeat 94% 50%;*/
}

#ja-cssmenu li ul a:hover,
#ja-cssmenu li ul a:active,
#ja-cssmenu li ul a:focus,
#ja-cssmenu ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchild-activesfhover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild-activesfhover {
	/*background: #444;*/
	color: #fff;
}

#ja-cssmenu ul li a.active,
#ja-cssmenu ul li a.active:hover,
#ja-cssmenu ul li a.active:active,
#ja-cssmenu ul li a.active:focus {
	display: block;
	float:left;
	color: #fff;
	text-transform:uppercase;
	line-height: normal;
	text-decoration: none;
	background-image: url(../../images/tabsnoir2.png);
	background-repeat: no-repeat;
	background-position: 100% 0px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 2px;
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 8px;
	padding-left: 8px;
}