Pb d'adaptation du menu deroulant vertical du tutoriel alsacreations

Bonjour,

J'ai installé sur un site le menu déroulant de cet exemple :
http://css.alsacreations.com/xmedia/exemples/deroulant/cssmenu4.htm

(je l'ai adapté à SPIP s'il y a des intéressés...)

Le seul probleme est que le sous-menu qui s'affiche est positionné en abslolu.
Mon site étant centré, ça pose un probleme...

ça fait plusieurs heures que j'essaie de l'adapter pour qu'il soit en float, afin que le bloc de sous menu s'affiche à droite de l'item de menu lors du survol.

Voilà ce que ça fait quand j'enleve le 'position:absolute" et que je rajoute "float: left" un peu au petit bonheur la chance...

test

les sous-menus s'affichent SOUS les items de menu et non pas à leur droite. En plus, du coup, ça décale les items du menu...

Voici donc ma CSS

#entete {
text-align: left;
width: 250px;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
width: 250px;
}   

#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 34px;
line-height: 20px;
margin: 0px 0;
text-align: center;
font-weight: bold;
float: left;
}

#menu dd {
    float: left;
z-index: 100;
margin-top: -1.4em;
width: 13em;
background: #FFFFFF;
border: 1px solid gray;
}

#menu ul {
padding: 2px;
    float: left;
}

#menu li {
text-align: left;
font-size: 85%;
line-height: 18px;
}

#menu li a, #menu dt a {
text-decoration: none;
display: block;
}

et le code : (j'ai enlevé les boucles de SPIP pour plus de lisibilité)

<div id="entete">
<dl id="menu">
  
	<dt onmouseover="javascript:montre('smenu1');"><a href="#"><img id="img_item1" src="mes_img/menu1.gif}"  border=0 /></a></dt>
				
	<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();" class="dd1">
	<ul class="item1">
       <li><a href="#">sous-rubrique xy</a></li>
  <li><a href="#">sous-rubrique z</a></li>
</ul>
	</dd>	

</dl>
</div>

J'ai lu un post de quelqu'un qui avait un pb du même genre. On lui avait conseillé d'agrandir la largeur du conteneur du menu (chez moi elle est fixée à 250px), afin que celui-ci ait la place de se développer vers la droite. Mais si je fais ça, c'est tout mon menu qui devient horizontal : les rubriques principales se retrouvent les unes à coté des autres. Et avec le survol, c'est n'importe quoi...

Désolé, je débute, et j'ai un peu du mal encore avec le positionnement...
Pourtant, j'ai lu et relu les tutoriels je ne sais pas combien de fois... mais il n'y a rien de tel que la pratique !
Peut etre qu'il faut que j'utilise "position:relative" ? ohlala, je patauge !

merci de votre aide
Modifié par quizz (29 Mar 2007 - 13:51)

Hello,

Tes URL ne fonctionnent malheureusement pas, tu les as rédigées sans tenir compte des explications données dans l'Aide du forum et dans la FAQ

Je te suggère vivement d'éditer ton message afin de corriger ce problème.

oups je suis allé trop vite, c'est corrigé, sorry...

J'en profite pour ajouter : il faut que le bloc de sous menu qui apparait en roll-over recouvre le contenu du site, donc dépasse de son conteneur. Là, je seche...