18041 sujets

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

Souci avec un menu déroulant "

Bonjour,

Tout d'abord, merci à vous pour les tutoriels et mes modèles des menus qui m'ont beaucoup aidé.

Voilà j'ai de petits avec un menu déroulant dans lequel, j'ai voulu imbriqué un sous menu extensible à droite. Il ne fonctionne pas sous IE.
Quand je passe à une "ligne" au dessous, il disparaît.

Biensûr le code que j'ai utilisé doit être assez encombré s'il vous plaît soyez cléments ^^.

Je me permets de mettre le code employé. Le problème à l'affichage se situe plus précisément dans la partie "Formation".

<!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>index_formation</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

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


<style type="text/css">
<!-- 
/* CSS issu des tutoriels  http://css.alsacreations.com  */
body {
	margin: 0;
	padding: 0;
	background: white;
	font: 80% verdana, arial, sans-serif;
	background-color: #FFFFFF;
}
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	z-index: auto;
}
#menu {
	position: absolute;
	top: 12px;
	left: 6px;
	z-index:100;
	width: 943px;
	overflow: hidden;
	color: #7478FF;
	border-color: #6F71D6;
	border-left-color: #F5D230;
	height: auto;
	margin-left: 5px;
}
#menu dl {
	float: left;
	width: 132px;
	margin: 0 1px;
	background-color: #FC8200;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #ccc;
	border: 1px solid gray;
	background-color: #DDE1E0;
	border-color: #6D71CA;
	color: #FF7E07;
}
#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-color: #FFCC00;
	color: #F97705;
}

#site {
	position: absolute;
	z-index: 1;
	top : 112px;
	left : 245px;
	color: #000;
	background-color: #ddd;
	padding: 5px;
	border: 1px solid gray;
}

a {text-decoration: none;
color: black;
color: #222;
}
.Style1 {
	color: #FF9900
}
body,td,th {
	color: #44381E;
	font-family: verdana;
	text-transform: none;
}
.Style2 {
	color: #99CCFF
}
.date_heure {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #B89291;
	text-decoration: blink;
}
.Style8 {
	color: #2A4968;
	font-weight: bold;
	font-size: 12px;
}
.Style10 {	font-size: 12px;
	color: #339900;
	font-weight: bold;
}
a:link {
	color: #339900;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #6600CC;
}
a:hover {
	text-decoration: none;
	color: #3366FF;
}
a:active {
	text-decoration: underline;
}
.Style11 {font-size: 18px}
.Style13 {
	color: #2A4968;
	font-style: italic;
	font-size: 12px;
	font-weight: bold;
}
ul,li,a {
	display:block;
	margin:0;
	padding:0;
	border:0;
	}

	ul {
	width:130px;
	list-style:none;
	}

	li {
	position:relative;
	padding:1px;
	padding-left:0px;
	z-index:auto;
	}
		li.folder	{}		
		li.folder ul {
	position:absolute;
	left:100px; /* IE */
	top:5px;
		}		
			li.folder>ul {
	left:100px;
	border:1px;

		} /* others */

li>a {
	width:auto;

} /* others */

	li a.submenu {}

	/* regular hovers */

	a:hover {
		border-color:gray;
		background-color:#bbb7c7;
		color:black;

	}
		li.folder a:hover {
	background-color:#bbb7c7;

		}
	
	/* hovers with specificity */
	
	li.folder:hover {
	z-index:1;

 }		
		
	ul ul, li:hover ul ul {
	display:none;

	}

	li:hover ul, li:hover li:hover ul {
	display:block;
	border:1px solid gray;
	list-style: none;
	width: 130px;
	}		
.Style14 {
	font-size: 11px
}
-->
</style>
</head>
<body>
<tr>
  <td width="949"><div id="menu">
        <dl>
          <dt onmouseover="javascript:montre();"><a href="../index.html" title="Retour &agrave; l'accueil" class="Style1">Accueil</a></dt>
        </dl>
        <dl>
          <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
          <dd style="display: none;" id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
            <ul>
              <li><a href="../1_presentation/mot_proviseur.htm">Mot du proviseur</a></li>
              <li><a href="../1_presentation/histoire.htm">Historique</a></li>
              <li><a href="../1_presentation/presse.htm">La Presse</a></li>
              <li><a href="../1_presentation/equipe_adm.htm">L'équipe administative</a></li>
              <li><a href="../1_presentation/equipe_peda.htm">L'équipe pédagogique</a></li>
			  <li><a href="../1_presentation/activite.htm">Activités</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
          <dd style="display: none;" id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
            <ul>
              <li><a href="../2_actualites/actu.htm">Actualités</a></li>
              <li><a href="../2_actualites/archive.htm">Archives</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onmouseover="javascript:montre('smenu3');">Formations</dt>
          <dd style="display: none;" id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
            <ul>
              <li value="Voie generale"class="folder">			
                <a href="" class="submenu Style14">Voie générale</a>
                <ul>
                  <li><a href="../3_formations/bac_l.htm" class="Style14">Voie littéraire</a></li>
			      <li><a href="../3_formations/bac_es.html" class="Style14">Voie SES</a></li>
			      <li><a href="../3_formations/bac_s.html" class="Style14">Voie scientifique</a></li>
			    </ul>
		      </li>
              <li value="Voie technologique"class="folder">			
                <a href="" class="submenu Style14">Voie technologique</a>
                <ul>
                  <li><a href="../3_formations/bac_sti_gm.html" class="Style14">Bac STI génie mécanique</a></li>
			      <li><a href="../3_formations/bac_sti_ge.html" class="Style14">Bac STI Génie Electrotechnique</a></li>
			      <li><a href="../3_formations/bt_ca.html" class="Style14">BT CA Collaborateur d'Architecte</a></li>
			    </ul>
		      </li>
			  <li><a href="../3_formations/voie_professionnelle.htm" class="Style14">Voie professionnelle</a></li>
			  <li><a href="../3_formations/post_bac.htm" class="Style14">Voie post-Bac</a></li>
			  <li><a href="../3_formations/options_seconde.html" class="Style14">Options en Seconde</a></li>
			  <li><a href="../3_formations/3ieme_DP6.html" class="Style14">Classe de 3ème DP6</a></li>
			  <li><a href="../3_formations/theme_etudes.htm" class="Style14">Thèmes d'études</a></li>						
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
          <dd style="display: none;" id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
            <ul>
              <li><a href="../4_vie_peda/equipes.htm">Archives projets</a></li>
              <li><a href="../4_vie_peda/chef_travaux.html">Chef de Travaux</a></li>
            </ul>
          </dd>
        </dl>
	    <dl>
	      <dt onmouseover="javascript:montre('smenu5');">Clubs</dt>
          <dd style="display: none;" id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
            <ul>
              <li><a href="../5_clubs/club1.htm">Géologie</a></li>
              <li><a href="../5_clubs/club2.htm">EPS</a></li>
              <li><a href="../5_clubs/club3.htm">Club 3</a></li>
              <li><a href="../5_clubs/club4.htm">Club 4</a></li>
              <li><a href="../5_clubs/club5.htm">Club 5</a></li>
              <li><a href="../5_clubs/club6.htm">Club 6</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onmouseover="javascript:montre('smenu6');">Contacts</dt>
          <dd style="display: none;" id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
            <ul>
              <li><a href="../6_contacts/index_contact.htm">Contacts</a></li>
              <li><a href="../6_contacts/plan.htm">Plan</a></li>
            </ul>
          </dd>
        </dl>
      </div>      
  <span id="menu">
      <dl>
        <dt onmouseover="javascript:montre();"><a href="../index.html" title="Retour &agrave; l'accueil" class="Style1">Accueil</a></dt>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu1');">Pr&eacute;sentation</dt>
        <dd style="display: none;" 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');">Actualit&eacute;s</dt>
        <dd style="display: none;" 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>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu3');">Formations</dt>
        <dd style="display: none;" id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
        	<ul> 
              <li value="Voie generale"class="folder">			
				<a href="" class="submenu Style14">Voie générale</a>
				<ul>
			      <li><a href="../3_formations/bac_l.htm" class="Style14">Voie littéraire</a></li>
				  <li><a href="../3_formations/bac_es.html" class="Style14">Voie SES</a></li>
				  <li><a href="../3_formations/bac_s.html" class="Style14">Voie scientifique</a></li>
				</ul>
			  </li>
              <li value="Voie technologique" class="folder">			
				<a href="" class="submenu Style14">Voie technologique</a>
				<ul>
			      <li><a href="../3_formations/bac_sti_gm.html" class="Style14">Bac STI génie mécanique</a></li>
				  <li><a href="../3_formations/bac_sti_ge.html" class="Style14">Bac STI Génie Electrotechnique</a></li>
				  <li><a href="../3_formations/bt_ca.html" class="Style14">BT CA Collaborateur d'Architecte</a></li>
				</ul>
			  </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>
              <li><a href="#">Sous-Menu 3.6</a></li>
              <li><a href="#">Sous-Menu 3.7</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu4');">Vie p&eacute;dagogique</dt>
        <dd style="display: none;" 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>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu5');">Projets et Clubs</dt>
        <dd style="display: none;" id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
          <ul>
            <li><a href="#">Sous-Menu 5.1</a></li>
            <li><a href="#">Sous-Menu 5.2</a></li>
            <li><a href="#">Sous-Menu 5.3</a></li>
            <li><a href="#">Sous-Menu 5.4</a></li>
            <li><a href="#">Sous-Menu 5.5</a></li>
            <li><a href="#">Sous-Menu 5.6</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu6');">Contacts</dt>
        <dd style="display: none;" id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
          <ul>
            <li><a href="#">Sous-Menu 6.1</a></li>
            <li><a href="#">Sous-Menu 6.2</a></li>
          </ul>
        </dd>
      </dl>
    </span> </td>
</tr>
<script type="text/javascript">
<!--

//-->
      </script>
</body></html>


Merci pour votre aide.
Modifié par Gri (01 Jul 2008 - 11:13)
Salut,

Y aurait-t-il moyen de voir une page en ligne ? C'est un peu démotivant le copier-coller de code tout brut sans la page qui va avec. Un navigateur l'interprète en quelques fractions de secondes, ça en prend un peu plus à l'être humain. Smiley cligne
Sujet clos
Aller à