Bonjour à toutes et à tous,
Je débute dans le html / css depuis quelques semaines et je bug sur l'affichage de mon menu.
J'ai créé un menu horizontal qui fonctionne très bien et les sous-menus aussi. (Hover, link)
Le problème : J'aimerai que lorsque l'on arrive dans une page du menu 2/3/4 il m'affiche le sous-menu approprié. Car pour l'instant il m'affiche obligatoirement le sous-menu 1 Smiley decu

Merci d'avance pour vos réponse Smiley smile


Féco

        	<div class="menus">	
            	<ul class="niveau1">
                	<li><img src="Images/menus/btn_presentation_on.png" alt="Présentation"/>
                        <div class="sousmenus">
                            <strong>
                                <a href="#" class="presentation_first" target="_top">Historique</a><span style="color:#afafaf">-</span>
                                <a href="#" class="presentation" target="_top">Missions</a><span style="color:#afafaf">-</span>
                                <a href="#" class="presentation" target="_top">Bilan d'activités</a><span style="color:#afafaf">-</span>
                                <a href="#" class="presentation" target="_top">Revue de presse</a>
                            </strong>
                        </div>
           		  </li>
					<li><span style="margin:0 1px"><img src="Images/menus/btn_services_off.png" alt="Services" onmouseover="javascript:this.src='Images/menus/btn_services_on.png';" onmouseout="javascript:this.src='Images/menus/btn_services_off.png';"/></span>
                    <ul class="niveau2">
                    	<li>
                            <div class="sousmenus">
                                <strong>
                                    <a class="services_first" href="#" target="_top">Pour les jeunes</a><span style="color:#afafaf">-</span>
                                    <a class="services" href="#" target="_top">Pour les bailleurs privés </a><span style="color:#afafaf">-</span>
                                    <a class="services" href="#" target="_top">Pour les entreprises</a>
                                </strong>
                            </div>
                        </li>
                    </ul>
                    </li>
					<li><span style="margin:0 2px;"><img src="Images/menus/btn_bourse_off.png" alt="Bourse" onmouseover="javascript:this.src='Images/menus/btn_bourse_on.png';" onmouseout="javascript:this.src='Images/menus/btn_bourse_off.png';"/></span>
                    <ul class="niveau2">
                    	<li>
                            <div class="sousmenus">
                                <strong>
                                    <a class="bourse_first" href="#" target="_top">Types de logements</a><span style="color:#afafaf">-</span>
                                    <a class="bourse" href="#" target="_top">Fiche de renseignements</a>
                                </strong>
                            </div>
                        </li>
                    </ul>
                    </li>
					<li><span style="text-align:right"><img src="Images/menus/btn_contact_off.png" alt="Contact" onmouseover="javascript:this.src='Images/menus/btn_contact_on.png';" onmouseout="javascript:this.src='Images/menus/btn_contact_off.png';"/></span>
				  	<ul class="niveau2">
                    	<li>
                            <div class="sousmenus">
                                <strong>
                                    <a class="contact_first" href="#" target="_top">Permanances</a><span style="color:#afafaf">-</span>
                                    <a class="contact" href="#" target="_top">Infos pratiques</a>
                                </strong>
                            </div>
                        </li>
                    </ul>
                  </li>
                </ul>
        </div>


.menus{
	width:685px;
	margin-top:142px;
	margin-left:273px;
	}		

ul{
	margin:0 0;
	padding:0 0;
	}

ul.niveau1{
	position:relative;
	margin:0 0 0 0;
	padding:0 0 0 0;
	width:700px;
	z-index:99;
	}

.sousmenus{
	position:absolute;
	width:675px;
	height:21px;
	background-color:#fff;
	padding-top:7px;
	padding-left:10px;
	left:0px;
	top:31px;
	}

.degrades_top{
	background-image:url(../Images/degrades-petits-top.png);
	background-repeat:no-repeat;
	margin-top:-29px;
	width:1000px;
	height:30px;
	z-index:50;
	}

li{
	display:inline;
	margin-right:16px;
	}

li:hover ul.niveau2{display:inline; margin:0 0 0 0px; padding:0 0 0 0;}

ul ul{display:none;}