Se connecter avec
S'enregistrer | Connectez-vous

Faire disparaître sous-menu - HELP

Dernière réponse : dans Programmation

Bonjour,
Débutant dans la conception de site je tente de faire un menu déroulant horizontal avec apparition des sous menu lorsque la souris passe sur un élément du menu et disparition lorsque la souris n'est plus sur cet élément. Sur le site d'Aslacréations j'ai trouvé ce que je voulais sauf que je n'arive pas à faire disparaître les sous menus (je précise que si je vais sur un autre élément du menu, le sous menu de ce nouvel élément apparaît correctement mais si on passe la souris sur un élément et qu'ensuite on lit la page, les sous menus restent affichés).

Je mets le code ci-dessous :

<!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>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
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>


<style type="text/css">

body {
margin: 0;
padding: 0;
background: white;
font: 10px verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%; /* précision pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
.Style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.Style2 {font-size: 10px}
-->
</style>
</head>

<body>

<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil" class="Style1">Accueil</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="cacherdelai('smenu1');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>

<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
</ul>

</dd>
</dl>


<dl>
<dt class="Style2" onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>

<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>

</dd>
</dl>

<dl>
<dt class="Style2" onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>

<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>

</dd>
</dl>

<dl>
<dt class="Style2" onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>

<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>

</div>


</body>
</html>


Merci d'avance pour votre aide.

Autres pages sur : disparaitre menu help

Lassé par la pub ? Créez un compte

Et charset=iso-8859-15, si tu souhaites employer un jeu régional !! On est à l'heure de l'Euro depuis longtemps, maintenant et les pays de l'Est sont dans l'Europe !!! On utilise donc le jeu de caractères connu aussi sous le nom de Latin9 depuis quelques années..

C'est fini, le Latin1 avec "rien" dedans, même pas les Œ / œ pourtant si courants en français (si,si, c'était vrai : une omission par bêtise du préposé français qui avait transmis à l'organisme de normalisation international ISO le pauvre jeu de caractères français que son imprimante, pourtant française, de l'époque savait rendre)..

Sinon, de plus en plus le jeu Unicode utf-8 est employé, il est d'ailleurs par défaut avec l'XHTML 1.1 dans le cas où la déclaration du jeu de caractère est manquante dans le prologue XML.. Mais l'emploi d'utf-8 impose généralement que les caractères accentués soient codés au format HTML (sous la forme '&nom;'), ce que savent faire automatiquement les applis comme Dreamweaver ou d'autres..

:jap: 
Lassé par la pub ? Créez un compte

Créer un nouveau sujet