Problème menu déroulant / div
bonjour,
voila j'ai un menu déroulant suivi d'un balise div ou seront affiché les pages du menu
donc jusque la ca fonctionne pour l'affichage
mon problème est que lorsque je déroule un de mes menu cela s'affiche derrière la div plutot que devant.
Comment faire pour que ce soit l'inverse?
voici mon code de ma feuille de style
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <style type="text/css">
#menu{
margin-left:100px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: left;
width: 12em;
border-right:1px solid #fff;
border-left:1px solid #fff;
margin:.2em;
padding:.1em;
}
#menu dt {
text-align: center;
color:#FFF;
background-color:#036;
font:normal 90% arial, helvetica, sans-serif;
}
#menu dd {
border-top: 1px solid #FFF;
}
#menu li {
text-align: center;
background: #036;
font:normal 90% arial, helvetica, sans-serif;
color:#FFF;
}
#menu li a, #menu dt a {
color: #FFF;
text-decoration: none;
display: block;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background-color: #369;
color:#FFF;
}
body {
font-family:"palatino linotype";
background-color: #003366;
}
#entete {
background-color: #FFFFFF;
margin-left:100px;
width: 800px;
height:70px;
topmargin:0px;
color: #003366;
font-size: 16px;
}
p.titre {
font-size:30px;
color: #003366;
font-weight:bold;
}
#corps {
height: 467px;
width: 800px;
margin-left:100px;
position: absolute;
top : 110px;
left : 10px;
}
</style> |
et voici le code mon menu suivi de la balise div
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <div id="menu" align="center">
<dl>
<dt onmouseover="javascript:montre();"><a href="?p=AccueilOperateur" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Valeur d'un indicateur</dt>
<dd id="smenu1">
<ul>
<li><a href="?p=Ajout/AjoutValeur">Ajouter</a></li>
<li><a href="?p=Modification/ModifValeur">Modifier</a></li>
<li><a href="?p=Suppression/SupValeur">Supprimer</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Une étape</dt>
<dd id="smenu2">
<ul>
<li><a href="?p=Ajout/AjoutEtape">Ajouter</a></li>
<li><a href="?p=Modification/ModifEtape">Modifier</a></li>
<li><a href="?p=Suppression/SupEtape">Supprimer</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Une action simple</dt>
<dd id="smenu3">
<ul>
<li><a href="?p=Ajout/AjoutAS">Ajouter</a></li>
<li><a href="?p=Modification/ModifAS">Modifier</a></li>
<li><a href="?p=Suppression/SupAS">Supprimer</a></li>
</ul>
</dd>
</dl>
</div>
<br>
<!-- cadre du contenu -->
<div id="corps">
<?php
if (isset($_REQUEST["p"]) AND file_exists($_REQUEST["p"].".php")){
include($_REQUEST["p"].".php");
}else
include("AccueilOperateur.php");
?>
</div> |
probleme menu deroulant/div
merci ct ca
donc voici mon nouveau code pour la feuille de style
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
| <style type="text/css">
#menu{
margin-left:100px;
position:absolute;
z-index:100;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: left;
width: 12em;
border-right:1px solid #fff;
border-left:1px solid #fff;
margin:.2em;
padding:.1em;
}
#menu dt {
text-align: center;
color:#FFF;
background-color:#036;
font:normal 90% arial, helvetica, sans-serif;
}
#menu dd {
border-top: 1px solid #FFF;
}
#menu li {
text-align: center;
background: #036;
font:normal 90% arial, helvetica, sans-serif;
color:#FFF;
}
#menu li a, #menu dt a {
color: #FFF;
text-decoration: none;
display: block;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background-color: #369;
color:#FFF;
}
body {
font-family:"palatino linotype";
background-color: #003366;
}
#entete {
background-color: #FFFFFF;
margin-left:100px;
width: 800px;
height:70px;
topmargin:0px;
color: #003366;
font-size: 16px;
}
p.titre {
font-size:30px;
color: #003366;
font-weight:bold;
}
#corps {
height: 467px;
width: 800px;
margin-left:100px;
position: absolute;
top : 110px;
left : 10px;
z-index:1;
}
</style> |
