18041 sujets

Questions générales et questions de débutants

RESOLU(menu deroulant horizontal) pas de sous menu

bonjour et bonne année à tous.
alors, je viens d'avoir la mauvaise idée de me faire un site internet avec Nvu, sachant que je n'ai aucune base HTML ou CSS.
je suis donc tombé sur votre tuto pour un menu deroulant horizontal.
http://css.alsacreations.com/xmedia/exemples/deroulant/menu-horizontal.htm
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

j'ai essayé la variante pour que les sous-menus disparaissent, mais ni sous Firefox ni sous IE ils apparaissent.

est-ce que j'ai quelque chose a changer dans votre code pour qu'ils apparaissent??
(enfin je veux dire dans les codes, parceque j'ai dejà changer les noms et les couleurs)

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" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<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('smenu2');">Menu 2</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>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<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" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<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>


merki merki Smiley confused
Modifié par goatgrind (10 Jan 2007 - 19:01)
Salut

Pourrais-tu placer ton code entre les balises adéquates ([ code] & [ /code], sans les espaces), comme demandé dans les règles du forum ?

C'est le code javascript qui affiche ou cache les sous-menus ... est-il présent ?
Modifié par Sopo (10 Jan 2007 - 13:25)
Salut
goatgrind a écrit :
pour le code java, oui oui je l'ai mis (dans la partie head c'est bien ça????)
Attention, on parle ici de JavaScript et non de Java. Ce sont deux choses bien différentes. Smiley smile
goatgrind a écrit :
pour le code java, oui oui je l'ai mis (dans la partie head c'est bien ça????)
C'est bien ça. Tu as repris le code donné dans le tutoriel ? Aurais-tu un exemple en ligne ?
Sopo a écrit :
C'est bien ça. Tu as repris le code donné dans le tutoriel ? Aurais-tu un exemple en ligne ?


rien en ligne pour l'instant. mais pour faire simple, si je suis bien le tuto ( sans rien retoucher!), je me retrouve avec ça.

et la encore, les sous menu sont innaccessibles.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <style type="text/css" media="screen">
<!-- body {
margin: 0;
padding: 0;
background: white;
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: 0;
left: 0;
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: #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; }
-->
  </style>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>chala</title>
</head>
<body>
<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" onmouseover="javascript:montre('smenu1');"
 onmouseout="javascript:montre('');">
    <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('smenu2');">Menu 2</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>
<dl>
  <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
  <dd id="smenu3" onmouseover="javascript:montre('smenu3');"
 onmouseout="javascript:montre('');">
    <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" onmouseover="javascript:montre('smenu4');"
 onmouseout="javascript:montre('');">
    <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>
</body>
</html>


je suis peut etre tres con, enfin, je viens d'acheter "dreamweaver pour les nuls", peut etre que c'est de mon niveau Smiley bawling
Modifié par goatgrind (10 Jan 2007 - 16:53)
Heu, je ne vois pas le code javascript, là !?

Pour le moment, il n'y a que le code CSS (balise <style ...>). Ce dont tu as besoin, c'est le code javascript qui se trouve dans la balise 
<script type="text/javascript"> ... </script>
dans le tuto.
Sujet clos
Aller à