18041 sujets

Questions générales et questions de débutants

Menu deroulant haurizontal : les sous menus restent affichés

Bonjour a tous,
Comme bon nombre j'ai suivit le tutorial d'Alsa pour realiser mon menu déroulant haurizontal. Le probleme c'est qu'un fois un menu survolé , le sous menu reste affiché a l'écran même quand je survol un autre menu. Ce qui donne une fois tous mes menus survolés, tous mes sous-menu ouverts. J'aimerais, comme dans l'exemple d'Alsa qu'un sous-menus reste ouvert jusqu'au survol d'un autre sous menu. J'ai surement zapé quelque chose dans le code mais impossible de trouver ou ? Voici le html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Serviadis, Animation commerciale</title>
<link href="serviadis.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

</head>

<body>
<div id="global">
  <div id="bandeau">
     <img src="img/logo_serviadis.gif" width="95" height="101" alt="serviadis" title="serviadis" />
     <h1>ANIMATION COMMERCIALE <br />EN VIN ET GASTRONOMIE</h1>
     <div id="menu">
        <dl>
           <dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
        </dl>
        
        <dl>
           <dt onmouseover="javascript:montre('ss_menu_societe');"><a href="#" title="Notre société">Notre société</a></dt>
               <dd id="ss_menu_societe">
                   <ul>
                      <li><a href="#">• Identité</a></li>
                      <li><a href="#">• Chiffres clés</a></li>
                      <li><a href="#">• Notre implantation</a></li>
                   </ul>
               </dd>
        </dl>
        
        <dl>
           <dt onmouseover="javascript:montre('ss_menu_metier');"><a href="#" title="Notre métier">Notre métier</a></dt>
               <dd id="ss_menu_metier">
                   <ul>
                      <li><a href="#">• L’animation <br/>&nbsp;&nbsp;commerciale</a></li>
                      <li><a href="#">• Nos engagements</a></li>
                      <li><a href="#">• Nos clients</a></li>
                   </ul>
               </dd>
        </dl>
        
        <dl>
           <dt onmouseover="javascript:montre();"><a href="#" title="Fournisseurs">Fournisseurs</a></dt>
        </dl>
        
        <dl>
           <dt onmouseover="javascript:montre();"><a href="#" title="Animateurs">Animateurs</a></dt>
        </dl>
     </div>
    <!--fermeture div="menu"-->   
  </div><!--fermeture div="bandeau"-->
</div>
</body>
</html>


.. et voici le Css :



body {
padding:0;
margin:0;
text-align:center;
}

#global{
width:990px;
margin:90px auto 0;
text-align:left;
}
#bandeau { /* les div sont des conteneurs bloc neutres sans marges internes ni externes, margin/padding inutiles à supprimer */
width:990px;
}
#bandeau img { /* l'image en float pour autoriser le h1 à monter sur sa ligne */
float:left;
}
#bandeau h1 { /* le h1 en float pour autoriser le dl à monter sur sa ligne */
float:left;
padding:0;
margin: 72px 0 0 8px;
font-family: Arial, verdana, trebuchet, sans-serif;
font-size: 0.82em;
color: #bf3260;
}
#bandeau #menu { /* une liste de définitions, mieux adaptée à ton besoin, en float pour monter sur le h1 et glisser à droite */
float:right;
margin: 70px 0 0 0;
padding:0;
z-index:100;
}
#bandeau dl, #bandeau dt, #bandeau dd, #bandeau ul, #bandeau li { /* les définitions de la liste, le terme (dt) et sa description (dd) */
margin:0;
padding:0;
list-style-type: none;
}
#menu dl {
float: left;
}
#menu dt {
cursor: pointer;
}
#menu dd {
display: none;
}
#menu li {
padding: 7px 0 6px 15px;
margin: 1px 0 0 0;
color: white;
background-color: #cf6680;
font-family: arial,trebuchet;
font-size: 0.85em;
}
#menu li a, #menu dt a{
text-decoration: none;
display: block;
color: white;
}
#menu dt a {
padding: 12px 17px;
margin: 0;
color: white;
background-color: #735847;
font-family: copperplate gothic bold,arial black,arial,trebuchet bold;
font-size: 0.85em;
}
#menu dt a:hover, #menu dt a:focus {
background-color: #bf3260;
padding: 12px 17px;
margin: 0;
}
#menu li a:hover, #menu li a:focus {
text-decoration: underline;
}



J'en profite aussi pour vous demander comment faire pour que les menus restent colorés comme au survol tant que le sous-menu est ouvert (c'est a dire tant que la souris n'a pas suvolé un autre menu), même si la souris se ballade dans le sous menu ou ailleurs dans la page

Merci a vous pour votre aide
Modifié par chonchon (16 Apr 2008 - 14:13)
Sujet clos
Aller à