Alors :
le HTML :
<body onLoad="setCurrentLink();">
<div id="main">
<div id="header">
<a href="index.htm">
<img class="imgNoBorder" width="214" height="100" src="interf/logo.png" align="left" alt="Logo Xtrem by Sylphe"></a>
<div id="nav"><script type="text/javascript" src="js/nav.js"></script></div>
</div>
<div id="page">[...]/<div>.../<html>
le nav.js :
document.write ('<ul id="menuDeroulant">');
document.write ('<li><a href="index.htm" id="index">Accueil</a></li>');
document.write ('<li><a href="prods.htm" id="prods">Produits</a>');
document.write ('<ul class="sousMenu">');
document.write ('<li><a href="prod_summit.htm" id="prod_summit">Summit</a></li>');
document.write ('<li><a href="prod_kibo.htm" id="prod_kibo">Kibo</a></li>');
document.write ('<li><a href="prod_cross.htm" id="prod_cross">Cross</a></li>');
document.write ('<li><a href="prod_rock.htm" id="prod_rock">Rock</a></li>');
document.write ('<li><a href="prod_solo.htm" id="prod_solo">Free Solo</a></li>');
document.write ('<li style="padding-top:1em;"><a href="prod_fonctions.htm" id="prod_fonctions">Fonctions</a></li>');
document.write ('</ul></li>');
//document.write ('<li><a href="photos.htm"> Photos </a></li>');
document.write ('<li><a href="videos.htm" id="videos">Vidéos</a></li>');
document.write ('<li><a href="contact.htm" id="contact">Contact</a></li>');
//document.write ('<li><a href="liens.htm">Liens</a></li>');
document.write ('</ul>');
Le nav.css :
#menuDeroulant, #menuDeroulant .sousMenu {
border: 0 none;
list-style-type: none;
margin: 0;
padding: 0;
left: 0;
}
#menuDeroulant {
width: 400px;
overflow: hidden;
}
#menuDeroulant .sousMenu {
display: none;
position: relative;
background: #000000;
}
#menuDeroulant li {
float: left;
margin: 0;
}
#menuDeroulant .sousMenu li {
float: none;
}
#menuDeroulant li a, #menuDeroulant .sousMenu li a {
display: block;
height: 1.4em;
margin: 0;
padding: 0em 1em;
text-decoration: none;
border: 0 none;
}
#menuDeroulant li a {
border-right: 1px dotted #666666;
}
#menuDeroulant .sousMenu li a {
padding: 0em 0em 0em 1em;
}
#menuDeroulant li a:hover {
background-color: #CCCC33;
}
#menuDeroulant li:hover > .sousMenu {
display: block;
}
