11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Menu déroulant vertical - Faire un sous sous menu ???

Bonjour à tous, et encore merci pour les dernières aides.

Mais là j'ai encore plus de soucis (enfin ma patronne veut me faire faire des choses que je ne comprends pas).

Sur l'index de ma page : http://www.prepa-isp.fr, j'ai inséré du javascript pris sur un tutoriel ici.

Mais comme elle trouve ça bioen pour le menu déroulant sur "ENM" et "Sciences-Po", elle veut qu'il existe pour tous. 9a pas de problème...

Mais en plus elle veut que le menu de déroule dans un autre sous sous menu.

Je m'explique :

Sur la page, ENM ouvre sur un sous menu, Ecrits, Anciens Elèves et Oral. COmment faire pour que ces sous menus ouvrent sur d'autres sous sous menus (lire brochure et imprimer brochure, par exemple).

J'ai essayé plein de trucs mais comme le js et moi ça fait deux...

Voici mon code de ma page html

<!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>Prépa CRFPA (CFPA Avocat EFB): Tarifs de la prépa CRFPA de l'ISP</title>
<meta http-equiv="title" content="Prépa CRFPA (CFPA Avocat EFB): Tarifs de la prépa CRFPA de l'ISP">
<meta name="author" content="Groupe ISP">
<meta name="copyright" content="Groupe ISP">
<meta name="description" content="Prépa ISP (Prépa. Avocat): Préparation intensive (concours blancs et cours). Préparer les écrits, les libertés publiques, oraux techniques et langue pour l'examen d'entrée 2005 (CFPA / CRFPA / EFB).">
<meta name="keywords" content="prepa,prépa,préparation,preparation,CRFPA,CFPA,EFB,Avocat,Barreau,préparation CRFPA,préparation CFPA,préparation EFB,préparation avocat,préparation barreau,prépa CRFPA,prépa CFPA,prépa EFB,prépa avocat,prépa barreau,Varenne,Varennes,réforme barreau,programme CRFPA,entrée EFB,entrée CFPA,entrée CRFPA,modification CFPA,modification CRFPA,11 septembre 2003,formation avocat,IEJ,Annales CRFPA,annales CFPA,annales EFB,préparer le CRFPA,préparer le CFPA,préparer l'EFB,préparation au CRFPA,préparation au CFPA,préparation à l'EFB,préparation au Barreau,préparation du CRFPA,préparation du CFPA, préparation de l'EFB,groupe ISP,prépa intensive,préparation intensive,stage intensif,prépa concours,préparer concours,préparer un concours,préparer le concours,prépa examen,préparer examen,préparer un examen, préparer l'examen, Groupe ISP, Prepa ISP, annales corrigées CRFPA, annales corrigées avocat, annales gratuites CFPA, Fiche de cours, révisions CRFPA, révisions CFPA, révisions EFB, révisions avocat">
<meta name="generator" content="Dreamweaver 4.0">
<meta name="language" content="fr">
<meta name="revisit-after" content="15 day">
<meta name="distribution" content="global">
<meta name="robots" content="index,follow">
<meta name="robots" content="ALL">
<link rel="StyleSheet" href="http://www.prepa-isp.fr/styles/styleindex.css" 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>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-202920-1";
urchinTracker();
</script>
</head>
<body>
<div id="conteneur">
<div id="entetegauche">Groupe <span>ISP</span></div>
<div id="entetedroit"><p>Mise à jour : Lundi 21 novembre 2005</p>
<p><a href="mailto:%73%65%63%72%65%74%61%72%69%61%74%40%70%72%65%70%61%2D%69%73%70%2E%66%72">Contact</a></p></div>
<div id="menu">
<dl id="menuprepa">
		<dt onmouseover="javascript:montre('smenu1');">ENM</dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="http://www.prepa-isp.fr/enm/enm/enmecrits/enmprepa.htm">Ecrits</a></li>
					<li><a href="http://www.prepa-isp.fr/enm/enm_ae/enmae/enmaeforma.htm">Anciens Elèves</a></li>
					<li>Oral (disponible à partir du 15/04/06)</li>
				</ul>
			</dd>	
		<dt onmouseover="javascript:montre('smenu2');"><a href="http://www.prepa-isp.fr/crfpa/crfpaformationisp.htm">CRFPA</a></dt>
		<dt onmouseover="javascript:montre('smenu3');"><a href="http://www.prepa-isp.fr/ta/reccompta/reccomptaformation.htm">Tribunal Administratif</a></dt>
		<dt onmouseover="javascript:montre('smenu4');"><a href="http://www.prepa-isp.fr/commisaire/comformationisp.htm">Commissaire de Police</a></dt>
		<dt onmouseover="javascript:montre('smenu5');"><a href="http://www.prepa-isp.fr/indexlieut.htm">Officier de Police</a></dt>
		<dt onmouseover="javascript:montre('smenu6');"><a href="http://www.prepa-isp.fr/ena/enaformationisp.htm">ENA</a></dt>
		<dt onmouseover="javascript:montre('smenu7');">Sciences-Po</dt>
			<dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="http://www.prepa-isp.fr/sciences-po/ap/apanouintensif.htm">Entrée en 1er cycle</a></li>
					<li><a href="http://www.prepa-isp.fr/sciences-po/sc_po4/po4formationisp.htm">Entrée en 2nd cycle</a></li>
				</ul>
			</dd>
		<dt onmouseover="javascript:montre('smenu8');"><a href="http://www.prepa-isp.fr/hec/hecmodules.htm">HEC</a></dt>
</dl>
</div>
<div id="description">
<div id="descrisp">
<img src="http://www.prepa-isp.fr/styles/photoindex.jpg" title="Information Scolaire - Robert Doisneau"/>
</div>
<div id="defil"><marquee scrollamount="10"  scrolldelay="150" behavior="scroll"><a href="http://www.prepa-isp.fr/bourses/boursenovembre05.htm">Bourses d'honneur : 102 dossiers étudiés - 3 bourses 100% et 3 bourses 50% attribuées</a></marquee></div>
<div id="descrevo">
<p><a class="evo" href="http://www.prepa-isp.fr/formationcontinue/evoforoblig.htm">ISP EVOLUTIONS - La formation continue du Groupe ISP</a></p></div></div>
<div id="pied">Groupe ISP - 18, rue de Varenne, 75007 PARIS - 01.42.22.30.60  - RCS Paris 331  302 877 - APE 804 D</div>
</div>
</body>
</html>


et voici ma page css


/* éléments de mise en page du texte */
body {
margin: auto;
font: 8pt/16pt verdana, sans-serif;
color: #000;
background: #ccc;
}

p {
font: 6pt verdana, sans-serif;
margin: 0;
line-height: 1.5em;
}
h1 {
margin: 0;
line-height: 50%;
font: bold 12pt verdana, sans-serif;
letter-spacing: 1px;
color: #000;
text-align: center;
border-bottom: 1px solid #008000;
}
h2 {
margin: 0;
font: bold 10pt verdana, sans-serif;
color: #000;
text-decoration: underline;
margin-top: 15px;
margin-bottom: 5px;
}
h3 {
margin: 0;
font: italic bold 40pt verdana, sans-serif;
letter-spacing: 2px;
color: #696969;
}
a:link {
margin: 0;
font: bold 10pt verdana, sans-serif;
text-decoration: none;
color: #000;
}
a:visited {
margin: 0;
font: bold 10pt verdana, sans-serif;
text-decoration: none;
color: #000;
}
a:hover {
margin: 0;
font: bold 10pt verdana, sans-serif;
text-decoration: underline;
color: #f00;
}
a:activate {
margin: 0;
font: bold 10pt verdana,sans-serif;
text-decoration: none;
color: #f00;
}
span {
margin: 0;
font: bold 40pt verdana,sans-serif;
color : #696969
}
.pcentre {
font: 8pt/16pt verdana, sans-serif;
margin: 0;
line-height: 1.5em;
text-align: center;
}
a.menu:link {
margin: 0;
font: bold 12pt verdana, sans-serif;
text-decoration: none;
color:#fff;
}
a.menu:visited {
margin: 0;
font: bold 12pt verdana, sans-serif;
text-decoration: none;
color:#fff;
}
a.menu:hover {
margin: 0;
font: bold 12pt verdana, sans-serif;
text-decoration: none;
color:#f00;
}
a.menu:activate {
margin: 0;
font: bold 12pt verdana,sans-serif;
text-decoration: none;
color:#fff;
}
a.evo:link {
margin: 0;
font: bold 12pt verdana, sans-serif;
text-decoration: none;
color:#fff;
}
a.evo:visited {
margin: 0;
font: bold 12pt verdana, sans-serif;
text-decoration: none;
color:#fff;
}
a.evo:hover {
margin: 0;
font: bold 12pt verdana, sans-serif;
text-decoration: none;
color:#f00;
}
a.evo:activate {
margin: 0;
font: bold 12pt verdana,sans-serif;
text-decoration: none;
color:#fff;
}

/* menus */

#menuprepa {
float: left;
margin-top: 5px;
color: #fff;
font: bold 12pt verdana, sans-serif;
width: 200px;
list-style-type: none;
}

#menu dt {
cursor: pointer;
background: #A9A9A9;
height: 24px;
width: 270px;
padding: 8px 0 0 0;
margin: 8px 0 ;
border: 1px solid #fff;
color: #fff;
font: bold 12pt verdana, sans-serif;
text-align: center;
list-style-type: none;
}

#menu dd {
cursor: pointer;
position: absolute;
z-index: 100;
left: 335px;
margin-top: -40px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
width: 150px;
font: bold 10pt verdana, sans-serif;
}

#menu ul {
margin: 0;
padding: 0;
text-align: center;
width: 150px;
}

#menu li {
margin: 0;
width: 150px;
background: #A9A9A9;
text-align: center;
color: #fff;
font: bold 10pt verdana, sans-serif;
list-style-type: none;
border: 1px solid #fff;
}

#menu li a, #menu dt a {
color: #fff;
font: bold 12pt verdana, sans-serif;
text-decoration: none;
display: block;
}

#menu dt a:hover {
color: #f00;
font: bold 12pt verdana, sans-serif;
text-decoration: underline;
display: block;
}

#menu li a:hover {
color: #f00;
font: bold 10pt verdana, sans-serif;
text-decoration: underline;
}

#menu dd a {
color: #fff;
font: bold 10pt verdana, sans-serif;
text-decoration: none;
display: block;
}
#menu dd a:hover {
color: #f00;
font: bold 10pt verdana, sans-serif;
text-decoration: underline;
}

/* disposition des blocs */
#conteneur {
margin : 0;
height: 0;
width: 950px;
padding: 10px 20px 10px 60px;
list-style-type: none;
background-color: #ccc;
}
#entete {
float: left;
margin: 0;
paddin-left: 150px;
height: 70px;
width: 900px;
background-color: #ccc;
color: #696969;
font: bold 15pt Verdana;
text-align: left;
border-bottom: 1px solid #f00;
}
#entetegauche {
float: left;
margin: 0;
height: 65px;
width: 300px;
background-color: #ccc;
color: #696969;
font: bold 15pt Verdana;
text-align: center;
border-bottom: 1px solid #f00;
}
#entetedroit {
float: left;
margin: 0;
height: 65px;
width: 600px;
background-color: #ccc;
color: black;
text-align: right;
border-left: 0px solid #f00;
border-bottom: 1px solid #f00;
}
#menu {
float: left;
margin: 0;
padding: 25px 0px 20px 0px;
width: 300px;
background-color: #ccc;
}
#description {
float: left;
margin: 0;
padding: 25px 10px 0 0;
width: 500px;
background-color: #ccc;
text-align: justify;
}
#descrisp {
float: left;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 60px;
text-align: justify;
border: 0px solid #f00;
}
#defil {
float: left;
margin-top: 8px;
height: 20px;
width: 600px;
line-height: 15px;
font: 8pt/16pt verdana, sans-serif;
background-color: #ccc;
text-align: center;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#descrevo {
float: left;
cursor: pointer;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 0;
margin-right: 0;
padding: 5px 0 5px 0;
height: 15px;
width: 600px;
background-color: #A9A9A9;
text-align: center;
border: 1px solid #fff;
}
#pied {
float: left;
margin: 0;
width: 900px;
margin: 0;
background-color: #FFF;
border-top: 1px solid #f00;
text-align: center;
font: bold 8pt Verdana;
}



Merci beaucoup par avance et à bientôt


Guyome
Modifié par Guyome (22 Nov 2005 - 12:31)
Administrateur
Hello,

Les menus déroulants d'Alsa ne permettent pas, structurellement, d'avoir des sous-sous menu.
Tout simplement parce que l'imbrication d'éléments <a> au sein d'autres éléments <a> est interdite.

Dans la présentation du tutoriel, je propose deux liens externes vers d'autres menus déroulants. Ceux-ci permettent d'avoir des sous-sous menus.
Raphael a écrit :
Hello,

Les menus déroulants d'Alsa ne permettent pas, structurellement, d'avoir des sous-sous menu.
Tout simplement parce que l'imbrication d'éléments <a> au sein d'autres éléments <a> est interdite.

Bonjour, je ne pense pas que ce soit la vrai raison, car on peut faire un menu multiniveaux sans liens imbriqués.
C'est au point de vu accessibilité que les sous-menus ne sont accessibles qu'à la souris.
Test en css2 avec émulation des sélecteurs ">" et ":hover" en javascript pour IE
Sujet clos
Aller à