[Resolu] Problème menu déroulant horizontal

Bonsoir,

J'ai pris le code de ce menu là : http://css.alsacreations.com/xmedia/exemples/deroulant/menu-horizontal.htm

Mais quand je le met sur mon site, les sous-menus ne s'affichent pas quand je passe la souris dessus :s

Code XHTML :

<!-- MENU -->
	<div id="menu_haut">
		<ul>
		<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>

	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">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();"><a href="">Menu 2</a></dt>
	</dl>

	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>

					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>

			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>

					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	

</div>
		</ul>
	</div>
	<!-- FIN MENU -->

Code CSS :

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

#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
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 li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

Modifié par DaSilva (02 May 2007 - 15:21)

Salut,

Dans le tuto, il n'y a pas de display: none; sur les dd.

Ouais mais quand je l'enlève ça m'affiche les sous-menu même quand je pointe pas sur le menu !!

Peut-être parce que t'as oublié de mettre ça dans l'entête de ta page non ?

<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>

loooool
Je suis un boulet
Désolé j'étais complètement passé à côté !
Merci beaucoup je vais voir ça

En effet c'est déjà mieux XD
Seul problème, quand je pointe sur le menu, les sous menu s'affichent, mais ils ne se superposent pas avec le contenu de la page, du coup ça fait un gros décalage !

Ben positionne le menu en absolu.

<edit>

	<div id="menu_haut">
		<ul>

et

		</ul>
	</div>

C'est de trop dans ton code.
Modifié par koala64 (19 Apr 2007 - 22:52)

Merci beaucoup pour ton aide et ta patience
Mais même avec position:absolute; ça fait rien

As-tu une page en ligne ?

Ce serait plus facile pour te répondre.

Voilà je l'ai uploadé :

/



PS : Clique sur "Entrer sur le site"
Modifié par DaSilva (02 May 2007 - 15:22)

Pas d'idée ?

Salut,

Je ne vois pas le menu placé en absolu...

Il faut mettre quelquechose du genre :

#menu
{
   position: absolute;
   top: ... px;
   left: ... px;
}

Nickeeeeeeeeeeeel, ça marche, je ne sais pas pourquoi je l'avais pas mis ! :s
Merci beaucoup et encore désolé

Juste une dernière chose, pourquoi chaque bouton de mon menu est espacé par rapport à l'autre ?!

Merci !

Z'avez pas d'idées ?

Toujours personne ?

En utilisant une extension pour Firefox comme Firebug, tu peux voir quelles sont les propriétés CSS qui s'appliquent à un élément.
Dans ton cas, ça donne ceci :

#menu dl {
margin-left:22px;
}

Voilà l'origine des espacements.

Ah c'est sympa ça, je vais voir.
Et merci pour ta réponse, vais voir ça

Merci beaucoup, tout marche !

Bonjour, je suis nouvelle, j'ai fais une recherche sur le forum et je tombe sur ce sujet qui correspond tout à fait à mon soucis du moment (je précise, je suis plus que débutante, je ne connais rien à l'HTML, et autre CSS...je tatonne). Ravie, je pense régler mon soucis avec vos réponses, et pourtant non, çà ne marche toujours pas.....j'ai toujours les sous menus qui apparaissent directement, sans rien faire............

Voici une copie de ce que j'ai, si vous pouvez m'aider :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <style type="text/css" media="screen"><!-- body {
margin: 0;
padding: 0;
background: #FFFFCC;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 2;
left: 2;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #FFFFCC;
border: 1px #990066;
margin: 1px;
}
#menu dd {
border: 1px #990066;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #990033;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #990033;
background-color: #FFFFCC;
padding: 5px;
border: 1px #990066; }
-->
  </style>
  <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>
</head>
<body>
<div id="menu">
<dl style="color: rgb(153, 0, 0);">
  <dt onmouseover="javascript:montre();"><a
 href="Accueil.html" title="Retour &agrave; l'accueil">Accueil</a></dt>
</dl>
<dl>
  <dt onmouseover="javascript:montre(Le mariage);"><a
 href="">Le
mariage</a></dt>
  <dd id="Le mariage">
    <ul>
      <li><a href="Petite%20histoire%20du%20mariage.html">Petite
histoire du mariage</a></li>
      <li><a href="Coutumes%20et%20traditions.html">Les
coutumes et traditions</a></li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre('Les Préparatifs');"><a
 href="">Les
Pr&eacute;paratifs</a></dt>
  <dd id="Les Pr&eacute;paratifs">
    <ul>
      <li><a href="Preparatifs.html">R&eacute;troplanning</a></li>
      <li><a href="Les%20tenues.html">Les tenues</a></li>
      <li><a href="Repas%20et%20animation.html">Repas
et animations</a></li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre('La Cérémonie d'engagement');"><a
 href="">La
C&eacute;r&eacute;monie d'engagement
    </a></dt>
  <dd id="La C&eacute;r&eacute;monie d'engagement">
    <ul>
      <li><a href="La%20ceremonie.html">S'engager
autrement...</a></li>
      <li><a href="Exemples%20de%20ceremonies.html">Exemples
de
c&eacute;r&eacute;monies</a></li>
      <li><a href="Exemples%20de%20textes.html">Id&eacute;es
de textes</a></li>
      <li><a href="Musiques.html">Id&eacute;es
de musiques</a></li>
      <li><a href="Temoignages.html">T&eacute;moignages</a></li>
      <li><a href="Presse.html">On en parle dans la
Presse</a></li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre('Les autres cérémonies');"><a
 href="">Les autres c&eacute;r&eacute;monies
    </a></dt>
  <dd id="Les autres c&eacute;r&eacute;monies">
    <ul>
      <li><a href="le%20bapteme.html">Le Parrainage</a></li>
      <li><a href="exemple%20parrainage.html">Exemples
de
c&eacute;r&eacute;monie de parrainage</a></li>
      <li><a href="Exemples%20de%20textes%20parrainage.html">Id&eacute;es
de textes</a></li>
      <li><a href="les%20funerailles.html">Les
Fun&eacute;railles</a></li>
      <li><a href="Exemple%20de%20fun%E9railles.html">Exemples
de
c&eacute;r&eacute;monies de fun&eacute;railles</a></li>
      <li><a href="Textes%20pour%20des%20funerailles.html">Id&eacute;es
de textes</a></li>
    </ul>
  </dd>
</dl>
<dt onmouseover="javascript:montre('La Webmastrice');"><a
 href="">La Webmastrice
  </a></dt>
<dd id="La Webmastrice">
  <ul>
    <li><a href="Presentation.html">Pr&eacute;sentation</a></li>
    <li><a href="Pourquoi.html">Pourquoi ce site ?</a></li>
    <li><a href="Nous.html">Notre mariage</a></li>
  </ul>
</dd>
<dt onmouseover="javascript:montre();"><a
 href="http://laiciennes.actifforum.com/index.htm" title="Forum">Forum</a></dt>
</div>
<p></p>
<br>
</body>
</html>

Modifié par krys1306 (03 Jun 2007 - 20:58)