Bonjour je suis actuellement sur un projet de site web nécessitant la mise en place d'un menu déroulant.
Après avoir fouiller de fond en comble les différentes scripts, je me suis donc arreter sur celui proposé par Alsacreation.
L'installation est fini, je procède à mes tests sous IE7 et FireFox tout est ok. En parallèle j'install donc IE6 afin de tester l'entière compatibilité , car beaucoup de personne tourne encore sous cette version et j'ai un décalage avec ma dernière cellule, après avoir tout essayé je post donc sur ce forum afin de savoir si quelqu'un sait d'ou pourrait venir ce petit problème.
Merci.
Voici l'adresse de test:
http://www.powerserv35.net/~powertech/essai/test.php
Et le code:
Fichier CSS:
Après avoir fouiller de fond en comble les différentes scripts, je me suis donc arreter sur celui proposé par Alsacreation.
L'installation est fini, je procède à mes tests sous IE7 et FireFox tout est ok. En parallèle j'install donc IE6 afin de tester l'entière compatibilité , car beaucoup de personne tourne encore sous cette version et j'ai un décalage avec ma dernière cellule, après avoir tout essayé je post donc sur ce forum afin de savoir si quelqu'un sait d'ou pourrait venir ce petit problème.
Merci.
Voici l'adresse de test:
http://www.powerserv35.net/~powertech/essai/test.php
Et le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<link href="menuh.css" rel="stylesheet" type="text/css" />
<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>
</head>
<body>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="10"> </td>
<td width="680">
<div id="menu">
<dl>
<dt><a href="./?page=1">Section 1</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="./?page=2">Section 2</a></dt>
<dd onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();" id="smenu1">
<ul onmouseout="javascript:montre();">
<li><a href="./?page=11">Liens1</a></li>
<li><a href="./?page=12">Liens2</a></li>
<li><a href="./?page=13">Liens3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="./?page=3">Section 3</a></dt>
</dl>
<dl>
<dt><a href="./?page=4">Section 4</a></dt>
</dl>
<dl id="lastmenu">
<dt><a href="./?page=5">Section 5</a></dt>
</dl>
</div>
</td>
<td width="10"> </td>
</tr>
</table>
</body>
</html>
Fichier CSS:
dl, dt, dd, ul, li {
margin: 0px;
padding: 0px;
list-style-type: none;
height:25px;
width:135px;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: auto;
left: auto;
z-index:100;
width: 100%; /* correction pour Opera */
width: 680px;
min-width: 680px;
display:inline;
font-size:11px;
border-right:1px solid gray;
height:26px;
}
#menu dl {
float: left;
width: 136px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
display: inline-block;
border-width:0px 0px 1px 1px;
border-color:gray;
border-style:solid;
}
#menu dd {
display: none;
}
#menu li {
text-align: center;
background: #fff;
border-width:0px 1px 1px 1px;
border-color:gray;
border-style:solid;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
padding: 5px 0;
height:15px;
}
#menu #ssmenu1 {
padding: 5px 0;
height:15px;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}