coucou
J'ai refais ton indentation parce que ça me convenait pas.
De plus il me faut te rappeler que tu ne peux pas utiliser plusiuers fois le même id dans un même document. Utilise class pour ça.
<html><head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="affiche%20thesaurus.php_fichiers/design.css"></head><body>
<div class="present">
<a href="http://127.0.0.1/abibois/crea%20thesaurus.php">
Renseigner le thésaurus</a>
</div>
<ul id="menu">
<li>Agencement interieur
<ul>
<li>Plafond
<ul>
<li>Plafond acoustique</li>
</ul>
</li>
<li>Revetement de sols
<ul>
<li>Finition pour parquet
<ul>
<li>Mastic</li>
<li>Vernis</li>
<li>Vitrificateur</li>
</ul>
</li>
<li>Parquet
<ul>
<li>Lame contrecolle</li>
<li>Lame massive</li>
<li>Lamelle a plat</li>
<li>Lamelle sur chant</li>
<li>Panneau contrecolle</li>
<li>Panneau en bois massif</li>
<li>Parquet démontable</li>
<li>Parquet en bois debout</li>
<li>Parquet mosaïque</li>
<li>Parquet pour sol sportif</li>
</ul>
</li>
<li>Plancher bois</li>
<li>Revetement de sols stratifie</li>
</ul>
</li>
<li>Revetement muraux
<ul>
<li>Boiserie
<ul>
<li>Moulure</li>
<li>Plinthe</li>
</ul>
</li>
<li>Lambris bois massif
<ul>
<li>Lambris naturel brosse</li>
<li>Lambris naturel brut de sciage</li>
<li>Lambris naturel traite thermiquement</li>
<li>Lambris naturel vernis</li>
<li>Lambris peint brosse</li>
<li>Lambris peint brut de sciage</li>
<li>Lambris peint vernis</li>
</ul>
</li>
</ul>
</li>
</ul>
</body></html>
Et pour le css ben j'ai repris le mien après avoir fait du ménage :
.present {
text-align:center;
}
/****************menu css*****************/
#menu {
top:95px;
position:fixed;
font-size:14px;
font-weight:300;
line-height: 1.4em;
left:3px;
}
#menu, #menu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
/*width : /*13em;*//*11em; /*largeur menu inutile car nav li width fait pareil*/
}
#menu li { /* all list items */
position : relative;
line-height : 1.7em;/* 1.25em;*//*hauteur des cellules*/
margin-bottom : -3px;/*espace entre les cellules, à -1 c'est bon avec firefox mais IE est con et il faut bien ça*/
width: 13em;/*11.05em;/*largeur menus*/
display:block;
border : 1px solid #06f;
cursor: crosshair;
text-align:left;/*position du texte*/
padding-left:2px;/*position du texte*/
}
#menu li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 13em;/*11.05em;/*marge gauche du second menu*/
margin-top : -1.8em;/*remonte les sous menus par rapport au precedent*/
}
#menu li ul ul { /* third-and-above-level lists */
left: -999em;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
Bon le css est pas très propre dsl.
Tu peux voir ce que ça donne sur mon site :
http://cqgclub.dyndns.org
Tu trouvera le code de base ici :
http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html
Seulement cela ne marche pas avec IE de merde sans javascript, et ça deconne tout court avec firefox 1.
Le javascript :
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").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);
J'espère que ça t'ira ;)
