Rebonjour 
alors voilà j'ai une nouvelle question par rapport au menu déroulant vertical.
En fait j'aimerai qu'une partie soit déjà visible à l'ouverture de la page (exemple partie 2 et ses sous menus), et qu'au survol des autres parties on voit les sous menus relatifs apparaître et la partie qui était visible au départ disparaître. Enfin, j'aimerai que lorsque le bouton sors des zones cliquables, la partie initialement visible réaparaisse. J'avais réussi à trouver une solution mais ça ne fonctionne pas sous IE, le menu ne cesse de s'ouvrir et de se fermer
Je vais coller mon code ci-dessous, si vous avez une idée je suis preneur.
Merci d'avance
Modifié par dipdipdow (06 Nov 2006 - 15:07)
alors voilà j'ai une nouvelle question par rapport au menu déroulant vertical.
En fait j'aimerai qu'une partie soit déjà visible à l'ouverture de la page (exemple partie 2 et ses sous menus), et qu'au survol des autres parties on voit les sous menus relatifs apparaître et la partie qui était visible au départ disparaître. Enfin, j'aimerai que lorsque le bouton sors des zones cliquables, la partie initialement visible réaparaisse. J'avais réussi à trouver une solution mais ça ne fonctionne pas sous IE, le menu ne cesse de s'ouvrir et de se fermer
Je vais coller mon code ci-dessous, si vous avez une idée je suis preneur.Merci d'avance
<!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>
<title>Menu déroulant vertical</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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';
document.getElementById('sous').style.display='none';}
}
function montresous() {
{document.getElementById('sous').style.display='block';
document.getElementById('smenu3').style.display='none';
document.getElementById('smenu4').style.display='none';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels http://css.alsacreations.com */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
dl#menu dd {
border: 1px solid gray;
}
dl#menu li {
text-align: center;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
dl#menu li a:hover, dl#menu dt a:hover {
background: #eee;
}
#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 171px;
left : 261px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
-->
</style>
</head>
<body>
<dl id="menu">
<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
<dt>Menu 2</dt>
<dd id="sous">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montresous();">Menu 3</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montresous();">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montresous();">Menu 4</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montresous();">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>
</ul>
</dd>
</dl>
<div id="mentions">Raphaël GOETTER<br />
<a href="http://www.alsacreations.com">Alsacréations</a><br />
<a href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Retour / Back</a></div>
</body>
</html>
Modifié par dipdipdow (06 Nov 2006 - 15:07)
