Merci bcp, grâce à votre aide j'ai parfaitement résolu le problème.
Je suis du coup passé en V2 (lol), et j'ai fait des menus déroulants !
J'ai juste un petit souci avec, je n'arrive pas à afficher le contenu du menu sur une ligne.
Dans #menu dl, j'ai mis 75px pour que les pages ne soient pas collées les unes contre les autres.
Par contre dans #menu dd, j'ai bien width:auto, mais le menu reste bloqué aux 75px. Alors que quand je mets 100px, les menus passent bien à 100px.
http://uzi.jupiterii.com/testmenu_v2/htmlv2.html
HTML
<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>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">ACCEUIL</a></dt>
</dl>
<dl>
<dt id="active"onmouseover="javascript:montre('smenu1');"><a href="" title="UN" id="current">UN</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#" class="rollopaque">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');"><a href="" title="DEUX">DEUX</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<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>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
</body>
CSS
body {
background-image:url(04.jpg);
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width:100%; /* correction pour Opera */
padding-left: 180px;
background:url(pagebar_bg.gif);
height: 37px;
}
#menu dl {
float: left;
width: 75px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: normal;
height: 37px;
line-height: 37px;
}
#menu dt a {
color: #fff;
font-family: "Trebuchet MS", Verdana, Arial, Sans-Serif;
font-size: 0.8em;
text-decoration: none;
padding-left: 3px;
display: block;
height: 100%;
border: 0 none;
}
#menu dd {
display: none;
border:#292929 px solid;
border-top: none;
width: auto;
}
#menu li {
text-align: left;
background-color: #2C2C2C;
filter: alpha(opacity=65);
-moz-opacity: 0.65;
-khtml-opacity: 0.65;
opacity: 0.65;
}
#menu li a {
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
color: #FFFFFF;
font-family: "Trebuchet MS", Verdana, Arial, Sans-Serif;
font-size: 0.8em;
}
#menu li a:hover, #menu li a:focus{
background:#808080;
color: #FFFFFF;
font-family: "Trebuchet MS", Verdana, Arial, Sans-Serif;
font-size: 0.8em;
}
#menu dt a:hover, #menu dt a:focus {
background:url(pagebar_bg2.gif)
}
#menu #active a
{
background-image: url('pagebar_bg4.gif');
}
J'imagine que c'est pas compliqué, mais au bout d'heure à me retourner le cerveau, je me suis dit qu'il valait mieux vous consulter peut etre
.