SOS menu ...... ouf !! J'en arrache !!!

Bonjour à tous.

Je suis certaine que c'est quelque chose qui m'échappe, mais j'ai de la difficulté à trouver ce qui ne fonctionne pas !
Le menu du haut, lorsque déroulé, n'embarque pas sur celui du bas, ce qui fait que mes liens ne sont pas accessibles. J'imagine que c'est une question de boîte ou j'sais pas trop !!!!


Voici ma feuille de style :

#HDropdown-orange-classic {
	padding:0px;
	list-style:none;
	height:29px;
	width:100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-variant: small-caps;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 0;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #828181;
	border-right-color: #828181;
	border-bottom-color: #828181;
	border-left-color: #828181;
	background-image: url(images/horizontal_blue_classic_bg.gif);
	background-repeat: repeat;
	background-position: top;
}
#HDropdown-orange-classic li {
	display:inline;
	position:relative;
	float:left;
}
#HDropdown-orange-classic li a {
	display:block;
	float:left;
	height:29px;
	line-height:29px;
	text-decoration:none;
	color:#FFFFFF;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #1F3057;
	padding-right: 15px;
	padding-left: 20px;
}
#HDropdown-orange-classic li a:hover {
	color:#7E8794;
	font-variant: small-caps;
	background-color: #FFF;
	
}
#HDropdown-orange-classic li ul {
	margin:0;
	position:absolute;
	top:29px;
	left:0;
	width:250px;
	display:none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #666;
	border-right-color: #666;
	border-bottom-color: #666;
	border-left-color: #666;
	font-variant: small-caps;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 5px;
	padding-right: 10px;
	background-color: #FFF;
}
#HDropdown-orange-classic li:hover ul {
	display:block;
	background-color: #FFF;
	height: 29px;
}
#HDropdown-orange-classic li:hover a {
	color:#333;
	background-color: #FFF;
	font-weight: bold;
	font-variant: small-caps;
	height: 29px;
}
#HDropdown-orange-classic li ul li {
	display:block;
	width:100%;
	background-color: #FFF;
	border: thin solid #666;
	padding-left: 2px;
	height: 29px;
	position: absolute;
}
#HDropdown-orange-classic li ul li:last-child {
	border-bottom:0px;
	background-color: #FFF;
}
#HDropdown-orange-classic li ul a {
	border-width:0px;
	color:#333;
	padding:0 4px 0 0;
	background-color:#FFF;
	font-variant: small-caps;
}
#HDropdown-orange-classic li:hover ul li a {
	color:#909090;
	background-color: #FFF;
}
#HDropdown-orange-classic li ul li a:hover {
	color:#333;
	background-color: #FFF;
}

Et voici mon menu (ne riez pas, c'est pour un client) :

<table width="912" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="40"><ul id="HDropdown-orange-classic">
          <li><a href='bioecurite.php'>BIOSÉCURITÉ</a></li>
          <li><a href='#'>TECHNIQUE D'INSÉMINATION</a><ul>
              <li><a href="conservation.php">CONSERVATION</a></li>
               <li><a href="detectionchaleurs.php">DÉTECTION DES CHALEURS</a></li>
              <li><a href="periodepropice.php">PÉRIODE PROPICE</a></li>
              <li><a href="commentinseminer.php">COMMENT INSÉMINER</a></li>
            </ul></li>
          <li><a href="certification.php" title="">CERTIFICATION QUALITÉ</a></li>
          <li><a href="genetique.php" title="">GÉNÉTIQUE</a></li>
          <li><a href="livraison.php" title="">LIVRAISON</a></li>
          <li><a href="tarification.php" title=""> TARIFICATION</a></li>
        </ul></td>
      </tr>
      <tr>
        <td height="20"><ul id="HDropdown-orange-classic">
          <li><a href='#'>PRODUITS</a>
            <ul>
              <li><a href="semencepursang.php">SEMENCE</a></li>
              <li><a href="materielinsemination.php">MATÉRIEL D'INSÉMINATION</a></li>
              <li><a href="services.php">SERVICES</a></li>
            </ul>
          </li>
          <li><a href="commandes.php" title="">COMMANDES</a></li>
          <li><a href="#" title="">LISTE DES VERRATS</a>
            <ul>
              <li><a href="landrace.php">LANDRACE</a></li>
              <li><a href="yorkshire.php">YORKSHIRE</a></li>
              <li><a href="cedule.php">CÉDULE DE RÉCOLTE</a></li>
              <li><a href="calendrier.php">CALENRIER DE RÉCOLTE</a></li>
            </ul>
          </li>
          <li><a href="#">BIBLIOTHÈQUE</a>
            <ul>
              <li><a href="courrier-cipq.php">COURRIER DU CIPQ</a></li>
              <li><a href="techniporc.php">PRÉSENTATIONS TECHNIPORC</a></li>
              <li><a href="doc-cipq.php">DOCUMENTS CIPQ</a></li>
            </ul>
          </li>
          <li><a href="video.php">VIDÉOTHÈQUE</a></li>
          <li><a href="#"> LIENS</a><ul>
              <li><a href="liens_porcs.php">LIENS PORCS</a></li>
              <li><a href="liens_agronomie.php">LIENS AGRONOMIE</a></li>
              <li><a href="liens_divers">LIENS DIVERS</a></li>
            </ul></li>
        </ul></td>
      </tr>
    </table>

Êtes-vous en mesure de m'expliquer ce qui ne semble pas fonctionner ????


Merci !!!
Modifié par 6l20 (03 Oct 2012 - 21:44)

Salut,

A vu de nez, dans la soupe de code que tu nous sert, tu as un probléme de position absolute, placé sur ton li au lieu du ul, su coup tes li s'empile.

Je pense que tu doit avoir d'autres souci mais je vais éviter la migraine
Modifié par JJK801 (03 Oct 2012 - 21:22)

Ah snif. Justement, j'ai de la difficulté à trouver le/les coupable(s).

Est-ce que kk'un peut m'aider à coder ?

Merci !

Répondre à tes questions, oui, t'aider à coder, non, on est pas là pour ça

Renseigne toi sur le principe du parent le plus proche positionné.

Bonsoir,

Merci d'utiliser la colorisation syntaxique pour présenter votre code afin d'en faciliter la lecture et la compréhension.
Une page en ligne facilite l'aide que vous pourriez recevoir...
Vu que votre code ressemble étrangement à celui-ci vous pourriez tenter de faire la comparaison et voir ce qui les différencie...

Merci ! Effectivement, il ressemble pas juste étrangement mais c'est justement celui-là que j'ai tenté retravailler pour qu'il soit actif sur deux lignes.

Je m'y connais mettons... moyen dans les menus déroulants.
J'ai tenté en vain de modifier bien des choses, mais... bon.

Je vais continuer mes essais.


Merci quand même !

Bonjour,

Les menus déroutants, pardon déroulants, sont à utiliser avec précaution, ils sont très souvent peu accessibles, peu ergonomiques, et posent plus de problèmes qu'ils n'en résolvent (interopérabilité, maintenabilité, etc...).

Vouloir mettre deux menus déroulants à la suite, de cet acabit, sans véritablement en comprendre les mécanismes, cela confine, au minimum à la bêtise...
Le tableau est réellement nécessaire ?
Vous avez le droit (et le devoir) d'éduquer et de conseiller votre client...

Quoiqu'il en soit, il vous suffit de comparer le code de départ, le code d'arrivée pour comprendre où sont vos erreurs (positionnement, hauteur fixée là où ce n'est pas nécessaire, ...)