help in customize 5 horizontal levels css menu

i have posted a question about an horizontal css menu and had an good answer from Kravimir  however i 'm still lost because of all the level and sublevels ans the css rules applying to it to
below is the link to  the question and the answer allowing to work well
it should be ie7 ie8 friendly firefox too

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_25630974.html

but now i would like to add one more level ,
i made some tries but it was such a bad result that i leave you only the working answer code source
it 's a better starting point , i think
due to the global width of the expanded menu with 5 maybe the arrow image should be reduced

any help appreciated!
thanks
this the code answer  that worked well for 4 horizontal levels

<!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: 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;
}

  
  
</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

bug4.gif
bug5.gif
list.gif
jerrrrryAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

remorinaCommented:
Hi Jerry,
I've added the additional level example for you, I've also closed a missing closing tag </ul> near the end of your code.

You needed to adjust the width of the menu items in order to get the 5 levels show within your global content width and to adjust the positioning for the levels accordingly.

Try the code below

My final note would be that you should look into reducing the font sizes since some of your navigation get past the bottom of the browser making it very difficult for the user to check the rest of the menu, the only way was to hover over the sublevel and scroll using the mousewheel


capture-2.gif
capture-1.gif
0
remorinaCommented:

this the code answer that worked well for 4 horizontal levels
<!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: 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: 169px;
            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: 191px;
        }
        #navigation li:hover ul ul li ul
        {
            left: -9999px;
        }
        #navigation ul li ul ul li:hover ul
        {
            visibility: inherit; /* IE7 fix */
            left: 191px;
            z-index: 5;
        }
        #navigation li:hover ul ul ul li ul
        {
            left: -9999px;
        }
        #navigation ul li ul ul ul li:hover ul
        {
            visibility: inherit; /* IE7 fix */
            left: 191px;
            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>
                            </ul>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <br />
                            <a href="">Levels Test</a>
                            <ul>
                                <li><a href="">Level 2</a>
                                    <ul>
                                        <li><a href="">&nbsp;Level 3</a>
                                            <ul>
                                                <li><a href="">&nbsp;Level 4</a>
                                                    <ul>
                                                        <li><a href="">&nbsp;Level 5</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </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
jerrrrryAuthor Commented:
did i miss something?
i m trying to use the fifth level and to customize the menu

Développement personnel de carrière>Partenaires pour l'emploi> Agences de travail pour C.D.I. >le personnel employé
but no display of the items on IE?

thanks

<!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: 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: 5px; /* 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: 191px;
        }
        #navigation li:hover ul ul li ul
        {
            left: -9999px;
        }
        #navigation ul li ul ul li:hover ul
        {
            visibility: inherit; /* IE7 fix */
            left: 191px;
            z-index: 5;
        }
        #navigation li:hover ul ul ul li ul
        {
            left: -9999px;
        }
        #navigation ul li ul ul ul li:hover ul
        {
            visibility: inherit; /* IE7 fix */
            left: 191px;
            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; <strong>le personnel ouvrier</strong></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>
						  <ul>
                                                <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 cadres</a></li>
						 <li><a href="">le personnel de direction</a></li>
                                                <li><a href=""> les administrateurs</a></li>
						 </ul></li>
						</li>
                                            </ul>
                                        </li>
                                        <li><a href="">&nbsp;Les employeurs</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <br />
                            <a href="">Levels Test</a>
                            <ul>
                                <li><a href="">Level 2</a>
                                    <ul>
                                        <li><a href="">&nbsp;Level 3</a>
                                            <ul>
                                                <li><a href="">&nbsp;Level 4</a>
                                                    <ul>
                                                        <li><a href="">&nbsp;Level 5</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </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

bug5.gif
0
remorinaCommented:
looks like IE isn't recognising the visibility: inherit;, changing it to visible seems to fix it
Try the code below

<!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: 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: 5px; /* 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: 191px;
        }
        #navigation li:hover ul ul li ul
        {
            left: -9999px;
        }
        #navigation ul li ul ul li:hover ul
        {
            visibility: inherit; /* IE7 fix */
            left: 191px;
            z-index: 5;
        }
        #navigation li:hover ul ul ul li ul
        {
            left: -9999px;
        }
        #navigation ul li ul ul ul li:hover ul
        {
            visibility: visible; /* IE7 fix */
            left: 191px;
            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; <strong>le personnel ouvrier</strong></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>
						  <ul>
                                                <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 cadres</a></li>
						 <li><a href="">le personnel de direction</a></li>
                                                <li><a href=""> les administrateurs</a></li>
						 </ul></li>
						</li>
                                            </ul>
                                        </li>
                                        <li><a href="">&nbsp;Les employeurs</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <br />
                            <a href="">Levels Test</a>
                            <ul>
                                <li><a href="">Level 2</a>
                                    <ul>
                                        <li><a href="">&nbsp;Level 3</a>
                                            <ul>
                                                <li><a href="">&nbsp;Level 4</a>
                                                    <ul>
                                                        <li><a href="">&nbsp;Level 5</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </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

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
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.