Salut,
Il me semble que j'ai déjà été confronté à ce problème. En tous cas j'avais exactement le meme type de menu que toi (tu t'es inspiré d'alsacreation ?)
Bon, mon site à moi était en html, et voilà ma CSS
[code]dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative;
top: 2px;
left: 1px;
}
#menu {
width: 173px;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: left;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
body { background-color:#FFFFFF; color:#000000; margin-left:0px; margin-top:0px; margin-bottom:100px; font-family:Verdana }
a:link { color:#4E7E9F; }
a:visited { color:#4F9F6D; }
a:active { color:#B0457A; }
[/code]
voilà le code Javascript à inclure sur chaque page
[code]
<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>
[/code]
et enfin mes liens html :
[code]
<td height="262" width="174" background="Images/Menu.jpg">
<dl id="menu">
<dt onclick="javascript:montre();"><a href="index.htm">Accueil</a></dt>
<dt onclick="javascript:montre('smenu2');">Cahier des charges</dt>
<dd id="smenu2">
<ul>
<li><a href="cdct.htm">technique</a></li>
<li><a href="cdcc.htm">contenu</a></li>
<li><a href="charte.htm">Graphisme</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu3');">Code et internet</dt>
<dd id="smenu3">
<ul>
<li><a href="langhtml.htm">HTML</a></li>
<li><a href="langautres.php">Autres</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');">Graphisme</dt>
<dd id="smenu4">
<ul>
<li><a href="image.htm">Les images</a></li>
<li><a href="photsh.htm">Photoshop</a></li>
<li><a href="flash.htm">Flash</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu5');">Liens</dt>
<dd id="smenu5">
<ul>
<li><a href="liens.htm">Liens</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu6');">Divers</dt>
<dd id="smenu6">
<ul>
<li><a href="excel.htm">Excel</a></li>
<li><a href="bibli.htm">Bibliographie</a></li>
</ul>
</dd>
</dl>
</td>[/code]
et pis voilà avec ça pour moi ça marchait bien sur Internet exporer comme sur
Fire fox. J'espère que tu pourras te débrouiller avec ça, j'aurais un peu de mal à...t'expliquer[bigsmile]
A la vôtre [bierre]
Tu peux aller voir à quoi ça ressemble en cliquant sur l'adresse suivante :
http://www.dabril.com/SiteMire2005/
C'est un site réalisé dans le cadre d'une formation. Autrement dit, à part le menu qui fonctionne, y'a peu d'interet...
Modifié par papyboingtown le 07/04/2006 16:35
Problème en CSS avec les sous menus
