horizontal css menu bugging in ie8 maybe ie7

hello i have an horizontal menu but it has somme problèms with ie8
i made a screenshot to show you
so has it full of levels and sublevels, maybe i made a mistake and
i 'm asking you for gentle debugging

bugs with <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
what happens is sometimes third levels is displayed while it shouldn'tb
and there is also something like a delay on displaying the data
bugs with <meta http-equiv="X-UA-Compatible" content="IE=IE8">
very strange it displays wrongly the data!

any help appreciated
thanks
bug2.gif
bug3.gif
jerrrrryAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mreuringCommented:
Without being able to look at actual code, I can try to guess what might be going on but I wouldn't stand much of a chance. So, can you link us to a location where we can inspect this phenomena?
0
remorinaCommented:
Hi jerrrrry,
It would be best if you can provid a link or attach the source code so it would be possible to track down the issues
0
jerrrrryAuthor Commented:
here is the code!
sorry i thought it was done!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

<title>www.employability.be</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<style type="text/css" media="screen">
*{
margin:0;
padding:0;
}

body{
  background-color:#e6e6e6;
  font-family:Helvetica,Verdana,Arial,sans-serif;
_behavior:url(cssHoverFix.htc);
  } 
  
div#container{
width:960px;
margin:0 auto;
margin-top:10px;
/*background-color:white;*/
}

div#header{
width:100%;
height:125px;
background-color:#7A96DF ;
background-image: url(images/bandeau2.gif);
}


#language{
height:20px;
vertical-align :middle;
border: 0px solid #C8D1D9;
font-weight: bold;
font-size:14px;
}
 
#search { 
	width:260px;
	height:25px; 
	position: absolute;
	left:700px;
	top:90px;
	}

div#content{
/*background-color:yellow;*/
 background: #ccc url(images/image_de_fond.png) repeat; 
color:#666666;
width:960px;
/*background-repeat:repeat;*/
float:left;

}

div#col_gauche{
width: 190px;/*modif*/
/* background-color:yellow; */
margin-left:-770px;
/*height:700px;*/
float:left;
}

div#col_centre{
padding-left:190px;
/*margin-right:205px;*/
width: 580px;
/*background-color:yellow;*/
float:left;
/*height:700px;*/
}
#texte_gauche{
width:180px;
padding:5px;}

div#col_droite{

float:right;
padding:5px; /*modif*/
width: 175px;
/*background-color:#FFF;*/
/*height:700px;*/
}
div#footer{
clear:both;
background-color:purple;
background-color:#999999;
float:left;
color:#CCC;
width:100%;
text-align:center;
height:25px;
line-height:25px;
font-size: 14px;
}
  
  
  
 #navigation {width:188px;
font-size:16px;
font-family:Helvetica,Verdana,Arial,sans-serif;
}

#navigation ul{margin:0px; padding:0px; background-color:#666;}

#navigation ul a{color:#FFF;}

 #navigation ul ul{
display:none;
position:absolute;
left:188px;
top:0px;
border:#fff solid;
border-width:1px;
background-color:#999;
}

#navigation ul li{
height:90px;
font-size:18px;
font-family:Helvetica,Verdana,Arial,sans-serif;
list-style:none;
background-image: url(images/fleche2.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px; 
padding-left:10px;
color:#FFF;
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
cursor:pointer;}

#navigation ul li a{text-decoration:none;}


#navigation ul li:hover {background-color:#F90; position:relative;
background-image: url(images/list.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px; 
padding-left:10px;
}


#navigation ul li:hover ul{display:block;
}

#navigation ul ul li{
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
font-size:16px;
text-decoration:none;
height:45px;
width:188px;
float:left; 
padding-left:25px;
display:inline;}

#navigation ul ul li:hover {
background-image: url(images/list.gif);
border:none;
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
padding-left:25px;
}

#navigation li:hover ul li ul {display:none;}
#navigation ul ul li ul {left:210px;background-color:#999;}
#navigation ul ul li:hover ul {display:block; z-index: 5;}


#navigation li:hover ul li ul li ul {display:none;}
#navigation ul ul li ul li ul {left:210px;background-color:#999;}
#navigation ul ul li ul li:hover ul {display:block; z-index: 5;}

  
  
  
  
  
</style>

  </head>
    <body>
		<div id="container">
		
			
			<div id="content">
				<div id="col_centre">
					<div class="col">
					
					<h1>Le guide RH de la consultance</h1>

					</div>	
					
						
					
						
					
				</div>
			
			<div id="col_gauche">
				
				  <div id="navigation">
		    
		    <ul>
			<li><br/><a href=""> Développement personnel</a>
		
				<ul>
					<li><a href="">Profil de personnalité :</a>
						<ul>
					<li><a href="">&nbsp;types de personnalité</a></li>
					<li><a href="">&nbsp;tests et questionnaires</a></li>	
						</ul>
					</li>
			
					<li><a href="">Projet de vie, motivation</a></li>
			
					<li><a href="">Bilan de compétences</a></li>
			
					<li><a href=""> Feedback 360°</a></li>
					<li><a href=""> Aptitudes à communiquer</a></li>
			
					<li><a href="">Communication orale :</a>
						<ul>
							<li><a href="">&nbsp;face à face</a></li>
							<li><a href="">&nbsp;par téléphone</a></li>
							<li><a href="">&nbsp;par téléphone mobile</a></li>
							<li><a href="">&nbsp;par skype ou autre</a></li>
						</ul>
					</li>
					<li><a href="">Communication écrite :</a>
						<ul>
							<li><a href="">&nbsp;rapports, prise de notes</a></li>
							<li><a href="">&nbsp;e-mailing</a></li>
							<li><a href="">&nbsp;  twitter</a></li>
							<li><a href="">&nbsp;par skype ou autre</a></li>	
						</ul>
					</li>
					<li><a href=""> Lecture rapide</a></li>
			
					<li><a href=""> Communication non-verbale</a></li>
			
			
					<li><a href="">Connaissances en langues :</a>
						<ul>
							<li><a href="">&nbsp;Enseignement en groupe</a></li>
							<li><a href="">&nbsp;Enseignement individuel</a></li>
							<li><a href="">&nbsp;Enseignement par téléphone</a></li>
							<li><a href="">&nbsp;Langues de l'Union Européenne</a></li>
							<li><a href="">&nbsp;Autres langues européennes</a></li>
							<li><a href="">&nbsp;Langues orientales</a></li>
							<li><a href="">&nbsp;Laboratoires de langues</a></li>
							<li><a href="">&nbsp;Méthodes d’auto-apprentissage</a></li>	
						</ul>
					</li>
			
					<li><a href="">Créativité</a>
						<ul>
							<li><a href="">&nbsp;La pensée non-conventionnelle</a></li>
							<li><a href="">&nbsp;Mind mapping</a></li>
							<li><a href="">&nbsp;La pensée latérale</a></li>
							<li><a href="">&nbsp;La résolution de problèmes</a></li>
						</ul>
					</li>
			
					<li><a href="">Gestion du stress, problèmes de :</a>
						<ul>
							<li><a href="">&nbsp;Alcoolisme</a></li>
							<li><a href="">&nbsp;Drogues</a></li>
							<li><a href="">&nbsp;Harcèlement moral</a></li>
							<li><a href="">&nbsp;Harcèlement sexuel</a></li>
							<li><a href="">&nbsp;Burn-out</a></li>
							<li><a href="">&nbsp;Suicide</a></li>
							<li><a href="">&nbsp;Techniques de relaxation</a></li>
							<li><a href="">&nbsp;Réagir à la violence, à l'agression</a></li>	
						</ul>
					</li>
			
					<li><a href=""> Besoins de formation</a>
			
						<ul>
							<li><a href="">&nbsp;Identifier les besoins de formation</a></li>
							<li><a href="">&nbsp;Elaborer un plan de formation</a></li>
							<li><a href="">&nbsp;Evaluer les résultats d'une formation</a></li>	
						</ul>
			
			
			
			
			
					</li>
			
			
			
					<li><a href="">Coaching</a>
						<ul>
							<li><a href="">&nbsp;Auto-coaching</a></li>
							<li><a href="">&nbsp;Coaching individuel </a></li>	
						</ul>
					</li>
			
				
					
				</ul>
		
		
		
			</li>
		
		
			</ul>
			<ul>

					<li><br/><a href="">Développement au sein du groupe</a>
						<ul>
							<li><a href="">Interaction avec les autres</a>
								
								<ul>
									<li><a href="">&nbsp;autorité, diriger, leadership</a></li>
									<li><a href="">&nbsp;écoute</a></li>
									<li><a href="">&nbsp;assertivité, affirmation de soi</a></li>
									<li><a href="">&nbsp;intelligence émotionnelle</a></li>
									<li><a href="">&nbsp;empathie</a></li>
									<li><a href="">&nbsp;motivation, inciter à l'action</a></li>
									<li><a href="">&nbsp;collaboration</a></li>
								</ul>
							</li>
							
							
							<li><a href="">Style de direction d'un groupe</a>
								<ul>
									<li><a href="">&nbsp;délégation </a></li>
									<li><a href="">&nbsp;participative</a></li>
									<li><a href="">empowerment, donner du pouvoir</a></li>
									<li><a href="">&nbsp;  laissez-faire</a></li>
									<li><a href="">&nbsp; recrutement et sélection de collaborateurs</a></li>
									<li><a href="">&nbsp; accueil et intégration de collaborateurs</a></li>
								</ul>
							</li>
			
							<li><a href="">Capacités de négociation, médiation</a>
								<ul>
									<li><a href="">&nbsp;face à face </a></li>
									<li><a href="">&nbsp;en groupe </a></li>
								</ul>
							</li>
		
		
							<li><a href="">Gestion des plaintes, des conflits:</a>
								<ul>
									<li><a href="">&nbsp;de personnes</a></li>
									<li><a href="">&nbsp;de groupes</a></li>
								</ul>
							</li>
		
		
							<li><a href="">Aptitudes à communiquer en groupe</a>
								<ul>
									<li><a href="">&nbsp;Parler en public :</a>
										<ul>
											<li>à un groupe (petit ou grand) </li>
											<li>s’adresser aux médias  </li>
										</ul>
									</li>
									
									<li><a href="">&nbsp;Techniques de présentation : </a>
										<ul>
											<li>emploi des aides audio-visuelles ou autres </li>
											<li>via des techniques d'animation</li>
										</ul>
									</li>
									<li><a href="">&nbsp;Communication via internet : </a>
										<ul>
											<li>orale </li>
											<li>écrite</li>
										</ul>
									<li><a href="">Techniques d'animation de réunions</a></li>
									<li><a href="">Techniques de prise de décision</a></li>
									
									</li>	
								</ul>
							</li>
			
							<li><a href="">Culture d'entreprise gouvernance</a>
										<ul>
											<li><a href="">&nbsp;Management interculturel</a></li>
											<li><a href="">&nbsp;Politique de prévention</a></li>
											<li><a href="">Bien-être des travailleurs</a></li>
											<li><a href="">Politique de sécurité (security) des personnes</a></li>
											<li><a href="">Politique d'environnement</a></li>
										</ul>
	
							</li>
			
			
							<li><a href="">Constitution et motivation d'équipes </a>
										<ul>
											<li><a href="">&nbsp;Référentiel de compétence d'une équipe</a></li>
											<li><a href="">&nbsp;Equipes auto-gérées</a></li>
											<li><a href="">&nbsp;Identification des besoins en formation de l'équipe</a></li>
											<li><a href="">&nbsp;Coaching d'équipe, de groupe, teambuilding</a></li>
											<li><a href="">&nbsp;Créativité en groupe : brainstorming</a></li>
											<li><a href="">&nbsp;Enquêtes d'ambiance, de satisfaction</a></li>
											<li><a href="">&nbsp;Travail à temps partiel</a></li>
											<li><a href="">&nbsp;Télétravail </a></li>
			
			
										</ul>
	
							</li>
		
		
		
							<li><a href="">Gestion de projets </a>
										<ul>
											<li><a href="">&nbsp;Constituer une équipe de projet</a></li>
											<li><a href="">&nbsp;Conduire une équipe de projet</a></li>
											<li><a href="">&nbsp;Participer à une équipe de projet</a></li>	
										</ul>
	
							</li>
			
							<li><a href="">&nbsp;Gestion du changement</a></li>
			    
							<li><a href="">&nbsp;Management de la connaissance</a></li>
			
			
			
						</ul>	
		
		
					</li>
	

			</ul>
			<ul>
					<li><br/><a href="">Développement personnel de carrière</a>
						<ul>
		
							<li><a href="">Techniques de développement de carrière</a>
										<ul>
											<li><a href="">&nbsp;Evaluation de la performance individuelle</a></li>
											<li><a href="">&nbsp;Développement de carrière</a></li>
											<li><a href="">Planning de succession</a></li>
											<li><a href="">Réorientation de carrière, outplacement</a></li>
										</ul>
	
							</li>
		
							<li><a href="">Partenaires pour l'emploi</a>
										<ul>
											<li><a href="">&nbsp;Agences de travail temporaire pour</a>
													<ul>
														<li><a href="">&nbsp; le personnel ouvrier</a></li>
														<li><a href="">&nbsp;le personnel ouvrier qualifié</a></li>
														<li><a href=""> le personnel employé, de cadre et de direction</a></li>
														<li><a href="">les managers intérimaires de direction</a></li>
														<li><a href="">les travailleurs indépendants</a></li>
														<li><a href="">les travailleurs à domicile</a></li>
													</ul>
											</li>
		
		
											<li><a href="">&nbsp;Agences de travail pour C.D.I. </a>
													<ul>
														<li><a href="">&nbsp; le personnel ouvrier</a></li>
														<li><a href="">&nbsp;le personnel ouvrier qualifié</a></li>
														<li><a href=""> le personnel employé</a></li>
														<li><a href="">les employés administratifs </a></li>
														<li><a href="">les employés qualifiés et techniciens</a></li>
														<li><a href="">les travailleurs à domicile</a></li>
													</ul>
											</li>
		
		
		
											<li><a href="">&nbsp;Les employeurs</a></li>
		
		
		
		
		
		
										</ul>
	
							</li>
		
		
		
	
					</li>
</ul>


 </div> <!-- END OF  navigation --> 
			<div id="texte_gauche">	
				
				<a href="#">Link</a>
				colonne de gauche
				</div></div>
				
				
				
				
				
				<div id="col_droite">
				<a href="#">Link</a>
				</div>
				
			</div>
			
<div style="clear: both"><!-- --></div>
		<div id="footer">footer </div>
	</body>
</html>

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

jerrrrryAuthor Commented:
0
David S.Commented:
This may have been the worst case of IE7's sticky hover bug (http://css-class.com/articles/explorer/sticky/) that I've seen. I seem to have managed to get it working.
#navigation {
  width: 188px;
  font-size: 16px;
  font-family: Helvetica,Verdana,Arial,sans-serif;
}
#navigation ul {
  margin: 0;
  padding: 0;
  background-color: #666;
}

#navigation ul a {
  color: #FFF;
  text-decoration: none;
}

#navigation ul ul {
  position: absolute;
  left: -9999px;
  top: 0;
  border: #fff solid 1px;
  background-color: #999;
}

#navigation ul li {
  height: 90px;
  font-size: 18px;
  font-family: Helvetica,Verdana,Arial,sans-serif;
  list-style: none;
  background-image: url(fleche2.gif);
  background-repeat: no-repeat;
  background-position: 0 5px;
  color: #FFF;
  border-top: #fff solid 1px;
  border-bottom: #fff solid 1px;
  cursor: pointer;
  position: relative;
  padding-left: 14px;
  padding-left: 10px;
}

#navigation ul li:hover {
  background-color: #F90;
  background-image: url(list.gif);
}

#navigation ul li:hover ul {
  height: auto; /* IE7 fix */
  left: 188px;
}

#navigation ul ul li {
  font-size: 16px;
  height: 45px;
  width: 188px;
  float: left;
  padding-left: 25px;
  display: inline;
}
#navigation ul ul li:hover { background-image: url(list.gif);}

#navigation li:hover ul li ul { left: -9999px;}
#navigation ul ul li:hover ul {
  display: block; /* IE7 fix */
  z-index: 5;
  left: 210px;
}

#navigation li:hover ul ul li ul { left: -9999px;}
#navigation ul li ul ul li:hover ul {
  visibility: inherit; /* IE7 fix */
  left: 210px;
  z-index: 5;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jerrrrryAuthor Commented:
GREAT!
0
jerrrrryAuthor Commented:
i still need help with this menu
please have a look at http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_25840025.html

thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.