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> |
Partager