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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
| <!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>
<script type="text/javascript">
// Pour afficher correctement le menu déroulant dans IE6
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
// Masquer le select
function putFrame(){
var f = document.createElement("iframe");
var d = document.getElementById("menu");
with(f.style){
position= "absolute";
width = d.offsetWidth+"px";
height= d.offsetHeight+"px";;
top= d.offsetTop+"px";
left= d.offsetLeft+"px";
zIndex= "1";
}
document.body.appendChild(f);
}
</script>
<style>
#Nav {
list-style: none;
}
#Nav li {
background: #7F8400; /* Couleur fond */
float: left;
}
#Nav li a {
display: block;
background: #7F8400; /* Couleur fond */
color: white;
text-decoration: none;
}
#Nav li a:hover {
display: block;
background: #7F8400 url('images/menuactive.gif') repeat-x; /*Couleur passage souris */
color: white;
}
.Menu li {
list-style: none;
display: block;
width:120px;
}
.sous_menu {
list-style: none;
display: block;
width:140px;
margin-left: 120px;
margin-top: -30px;
}
#menu
{
position: relative;
background: #7F8400 url('images/menubg.gif') repeat-x top left;
height: 2.5em; /* Hauteur du fond vert */
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 2px;
z-index:2;
}
#menu li a
{
padding: 0.6em 1.0em 0.5em 1.0em; /* Dimension de l'image du menu (menuactive.gif) au passage de la souris*/
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #000; /* On passe le texte en noir... */
background: #fff; /* ... et au contraire, le fond en blanc */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
#liste { position: absolute; left: 15em; top: 7em; }
</style>
</head>
<body>
<div id="menu" onMouseOver="putFrame()">
<ul id="Nav">
<li><a href="#">Menu</a>
<ul class="Menu">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<ul class="sous_menu">
<li><a href="#">Menu3</a></li>
</ul>
</ul>
</li>
</ul>
</div>
<div id="liste">
<select>
<option>Option1</option>
</select>
</div>
</body>
</html> |
Masquer un select sous ie6 avec une source de la FAQ
.
Répondre avec citation
)
) que tu positionnes en absolu : dans l'exemple le div en question est "thediv". Ce div vient se placer au-dessus du div qui contient la liste déroulante.
Partager