Alors, j'ai modifié plusieurs choses sur ton fichier :
- l'appel de la fonction montre(); au chargement de la page qui me semblait erronnée telle que tu l'avais écrite dans le head, je l'ai placé sur la balise body
- j'ai placé les appels javascript
sur les liens texte à l'intérieur de tes balises li (je m'étais surement mal exprimée précédemment... )
Le tout semble fonctionner, seulement, il te faudrait supprimer l'espace entre tes menus et sous menus si tu veux que tout fonctionne correctement... Puisque le temps que la souris passe de l'un à l'autre, on détecte un événement onmouseout du bloc menu qui va cacher le sous menu...
Je ne sais pas si tout est clair pour toi sur cette fonction montre d'ailleurs ?
Pour le reste... niveau Css, je laisse la place aux autres
<!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 horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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';
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
background: white;
font: 80% verdana, arial, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 86px;
left: 20px;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
}
#menu1 dl {
float: center;
width: 5em;
}
#menu2 dl {
float: center;
width: 3em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#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;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 10px;
left : 10px;
right : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
width: 810px;
height: 600px;
}
a {text-decoration: none;
color: black;
color: #222;
}
.conteneur {
z-index: 0; /* layer la plus profonde contenant les autres */
position: absolute; /* */
top: 0px; /* Positionnement */
left: 0px; /* */
width: 840px; /* Dimensions */
height: 630px; /* */
background-color: #B3D9D9; /* rouge */
}
.header {
z-index: 2; /* layer header, au dessus de conteneur */
position: absolute; /* */
top: 5px; /* Positionnement */
left: 5px; /* */
height: 70px; /* Dimensions */
width: 810px; /* */
background-color: #CCE6E6; /* jaune */
}
.frame {
z-index: 5; /* layer frame (principale). index le plus élevé après le menu dans popupmenu.css */
position: absolute; /* */
top: 95px; /* Positionnement */
left: 5px; /* */
height: 495px; /* Dimensions */
width: 810px; /* */
background-color:#E6F2F2; /* vert */
overflow: auto; /* scroll */
color: #003366; /* text */
scrollbar-3dlight-color: #6699FF;
scrollbar-arrow-color: #006699;
scrollbar-base-color: #000000;
scrollbar-darkshadow-color: #006699;
scrollbar-face-color: #CCCCFF;
scrollbar-highlight-color: #99CCCC;
scrollbar-shadow-color: #9999FF;
scrollbar-track-color: #9999FF;
}
.footer {
z-index: 4; /* layer footer */
position: absolute; /* */
top: 590px; /* Positionnement */
left: 5px; /* */
height: 15px; /* Dimensions */
width: 810px; /* */
background-color:#CCE6E6; /* bleu */
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
}
-->
</style>
</head>
<body onload="montre();">
<div class="conteneur" id="conteneur">
<div id="menu">
<div id="menu1">
<dl>
<dt><a href="http://pingouin.eivd.ch/%7Erjottera/site_fromecs/maquettes/finalea/menu%2Bcss%2Bswap.htm" title="Retour à l'accueil" onmouseover="montre();MM_swapImage('IMGTOP','','files/img/menu1.jpg',0)" onmouseout="montre();MM_swapImgRestore()">HOME</a></dt>
</dl>
</div>
<div id="menu2">
<dl>
<dt><a href="http://pingouin.eivd.ch/%7Erjottera/site_fromecs/maquettes/finalea/menu%2Bcss%2Bswap.htm" title="Retour à l'accueil" onmouseover="montre();MM_swapImage('IMGTOP','','files/img/menu1.jpg',0)" onmouseout="montre();MM_swapImgRestore()">FR</a></dt>
</dl>
<dl>
<dt><a href="http://pingouin.eivd.ch/%7Erjottera/site_fromecs/maquettes/finalea/menu%2Bcss%2Bswap.htm" title="Retour à l'accueil" onmouseover="montre();MM_swapImage('IMGTOP','','files/img/menu1.jpg',0)" onmouseout="montre();MM_swapImgRestore()">EN</a></dt>
</dl>
<dl>
<dt><a href="http://pingouin.eivd.ch/%7Erjottera/site_fromecs/maquettes/finalea/menu%2Bcss%2Bswap.htm" title="Retour à l'accueil" onmouseover="montre();MM_swapImage('IMGTOP','','files/img/menu1.jpg',0)" onmouseout="montre();MM_swapImgRestore()">DE</a></dt>
</dl>
</div>
<dl>
<dt><a href="http://pingouin.eivd.ch/%7Erjottera/site_fromecs/maquettes/finalea/menu%201" onmouseover="javascript:montre('smenu1');MM_swapImage('IMGTOP','','files/img/menu1.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Menu 1</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#" onmouseover="javascript:montre('smenu1');MM_swapImage('IMGTOP','','files/img/menu1.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 1.1</a></li>
<li><a href="#" onmouseover="javascript:montre('smenu1');MM_swapImage('IMGTOP','','files/img/menu1.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 1.2</a></li>
<li><a href="#" onmouseover="javascript:montre('smenu1');MM_swapImage('IMGTOP','','files/img/menu1.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 1.3</a></li>
<li><a href="#" onmouseover="javascript:montre('smenu1');MM_swapImage('IMGTOP','','files/img/menu1.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 1.4</a></li>
<li><a href="#" onmouseover="javascript:montre('smenu1');MM_swapImage('IMGTOP','','files/img/menu1.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 1.5</a></li>
<li><a href="#" onmouseover="javascript:montre('smenu1');MM_swapImage('IMGTOP','','files/img/menu1.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="http://pingouin.eivd.ch/%7Erjottera/site_fromecs/maquettes/finalea/Menu%202" onmouseover="montre('smenu2');MM_swapImage('IMGTOP','','files/img/menu2.jpg',0)" onmouseout="MM_swapImgRestore()">Menu 2</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#" onmouseover="montre('smenu2');MM_swapImage('IMGTOP','','files/img/menu2.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 2.1</a></li>
<li><a href="#" onmouseover="montre('smenu2');MM_swapImage('IMGTOP','','files/img/menu2.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 2.2</a></li>
<li><a href="#" onmouseover="montre('smenu2');MM_swapImage('IMGTOP','','files/img/menu2.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 2.3</a></li>
<li><a href="#" onmouseover="montre('smenu2');MM_swapImage('IMGTOP','','files/img/menu2.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="http://pingouin.eivd.ch/%7Erjottera/site_fromecs/maquettes/finalea/Menu%203" onmouseover="montre('smenu3');MM_swapImage('IMGTOP','','files/img/menu3.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Menu 3</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#" onmouseover="montre('smenu3');MM_swapImage('IMGTOP','','files/img/menu3.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 3.1</a></li>
<li><a href="#" onmouseover="montre('smenu3');MM_swapImage('IMGTOP','','files/img/menu3.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 3.2</a></li>
<li><a href="#" onmouseover="montre('smenu3');MM_swapImage('IMGTOP','','files/img/menu3.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 3.3</a></li>
<li><a href="#" onmouseover="montre('smenu3');MM_swapImage('IMGTOP','','files/img/menu3.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 3.4</a></li>
<li><a href="#" onmouseover="montre('smenu3');MM_swapImage('IMGTOP','','files/img/menu3.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="http://pingouin.eivd.ch/%7Erjottera/site_fromecs/maquettes/finalea/Menu%204" onmouseover="montre('smenu4');MM_swapImage('IMGTOP','','files/img/menu4.jpg',0)" onmouseout="MM_swapImgRestore()">Menu 4</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#" onmouseover="montre('smenu4');MM_swapImage('IMGTOP','','files/img/menu4.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 4.1</a></li>
<li><a href="#" onmouseover="montre('smenu4');MM_swapImage('IMGTOP','','files/img/menu4.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 4.2</a></li>
<li><a href="#" onmouseover="montre('smenu4');MM_swapImage('IMGTOP','','files/img/menu4.jpg',0)" onmouseout="montre();MM_swapImgRestore()">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
<div class="site" id="site">
<div class="header" id="header"> <img src="menu+css+swapok_fichiers/baniere1.jpeg" alt="logo" name="IMGTOP" width="800" height="70" id="IMGTOP"></div>
<div class="frame" id="frame">
<h1>MAIN FRAME CSS</h1>
<p> </p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>[<a href="#">top</a>]</p>
</div>
<div class="footer" id="footer">FOOTER </div>
</div>
</div>
</body>
</html>
[/i][/i][/i][/i][/i][/i]
mais je n'arrive pas a une solution utilisable. 
