Accéder au sous menu

Bonjour,

Depuis être passé à la version 3 de Firefox je ne peux plus accéder aux sous menus de mon site.
Après mes recherches infructueuses je m'adresse à votre savoir.

Voici le lien où vous pouvez voir le menu en question,
le code html:

<div id="menu">
    <ul id="menugb">
      <li><a href="http://www.gregoire-barilleau.com/pagpro/connexion.php" title="Connectez-vous à l'Espace pro">Connexion</a>
          <ul>
            <li><a href="/pagpro/enregistrement.php" title="Enregistrez-vous à l'Espace pro">Enregistrement</a></li>
            <li><a href="/pagpro/mdp.php" title="Vous avez oublié votre mot de passe">Mot de passe oublié</a></li>
          </ul>
      </li>
      <li><a href="/pagpro/accueil.php" title="GB Espace pro">Accueil</a></li>
      <li><a href="/pagpro/equipe.php" title="Présentation de l'équipe GB">Equipe GB</a>
          <ul>
          	<li><a href="/pagpro/france.php" title="Secteur des commerciaux">Secteur des commerciaux</a></li>
          </ul>
      </li>
      <li><a title="Promotions en cours">Promotions</a>
      	<ul>
          	<li><a href="/pagpro/prixnet.php" title="Prix net unitaire valable jusq'au 31 décembre 2008">Prix net unitaire</a></li>
            <li><a href="/pagpro/promotions.php" title="Prix net unitaire valable jusq'au 31 décembre 2008">Malette collier de batterie</a></li>
            <li><a href="blisterpro.php" title="Implantation nouvelle gamme Blister">Gamme Blister</a></li>
        </ul>
      </li>
      <li><a href="/pagpro/concours.php" title="Concours Prestige 2007">Concours</a>
      	<ul>
            <li><a href="/pagpro/participation.php" title="Conditions de participation">Conditions participation</a></li>
            <li><a href="/pagpro/cdtgal.php" title="Conditions générales">Conditions générales</a></li>
            <li><a href="/pagpro/france.php" title="Où vous trouvez-vous?">Carte de france</a></li>
            <li><a href="/pagpro/prestige2007.php" title="Diaporama des participants 2007">Participants 2007</a></li>
            <li><a href="/pagpro/prestige2006.php" title="Diaporama des participants 2006">Participants 2006</a></li>
        </ul>
      </li>
      <li><a>Téléchargement</a>
      	<ul>
        	<li><a href="/pagpro/tarif.php" title="Télécharger les mises à jours">Tarifs</a></li>
            <li><a href="/pagpro/telecat.php" title="Télécharger le catalogue VL-PL">Catalogue</a></li>
        </ul></li>
      <li><a href="/pagpro/contact.php" title="Nous contacter">Contact</a></li>
    </ul>
  </div>

le css

/* ul barre princippale */
#menugb, #menugb ul {
	float: left;
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	background-image: url(../imgb/menu.jpg);
	background-repeat: repeat;
	background-position: center center;
	}
/* li barre principale */
#menugb li {
	float: left;
	padding: 0;
	line-height: 18px;
	border-top-width: 0;
	border-right-width: 1px;
	border-bottom-width: 0;
	border-left-width: 0;
	border-right-style: solid;
	border-right-color: #dc8b34;
	}
/* texte menus */
#menugb a {
	display: block;
	color: #3c281d;
	text-decoration: none;
	padding: 0.25em 2em;
	
	
	}
/* survol entetes menu */
#menugb a:hover {
	color: #ffffff;
	background-image: url(../imgb/menuo.jpg);
	background-repeat: repeat;
	background-position: center center;
	}

/* image sous menu*/
#menugb a.submenu {
	background: url("/img/droite-blanc.gif") center right no-repeat;
	display: block;
	}
/* li ul sous-menus */
#menugb li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 17em;
	margin: 0;
	border: 1px solid #dc8b34;
	background-color: #3c281d;
	}
/* li li sous-menu */
#menugb li li {
	padding-right: 1em;
	width: 14em;
	border-width: 0;
	line-height: 12px;
	}

#menugb li ul a { width: 13em; line-height: 12px; display: block; }
#menugb li ul a:hover {
	width: 13em;
	color:#FFFFFF;
	background-image: url(../imgb/menuo.jpg);
	display: block;
}

#menugb li ul ul { margin: -2em 0 0 17em; }

#menugb li:hover ul ul, #menugb li:hover ul ul ul, #menugb li.sfhover ul ul, #menugb li.sfhover ul ul ul {left: -999em; }

#menugb li:hover ul, #menugb li li:hover ul, #menugb li li li:hover ul, #menugb li.sfhover ul, #menugb li li.sfhover ul, #menugb li li li.sfhover ul {left: auto; }

/* survol elements de menu */
#menugb li:hover, #menugb li.sfhover {display: block;}
/* survol sous-menu */
#menugb li ul li:hover, #menugb li ul li.sfhover {display: block;}

Merci par avance
Modifié par Ipszy (31 Aug 2008 - 14:20)

Hello Ipszy ,

il y a effectivement un problème avec FF3 mais de toutes façons ton menu n'est pas accessible : on ne peut pas naviguer dedans au clavier.

Je suppose que ça existe en full CSS mais celui de Fairytells est connu pour l'être.

A+

@Didodu258 > le tuto dont tu parles est un peu vieillissant et les menus présentés ne sont pas très accessibles non plus.

Il est d'ailleurs en cours de réécriture par koala64 et sera très bientôt terminé (<-- private joke ).

Heyoan a écrit :

Il est d'ailleurs en cours de réécriture par koala64 et sera très bientôt terminé (<-- private joke ).

Ce tuto est d'ailleurs vieillissant:

a écrit :
Testé sous (tested under) Internet Explorer, Netscape, Mozilla, Opera et Firebird

Assez malin de ne pas mettre les versions mais grillé par le Firebird

Didodu258 a écrit :
Je ne comprend pas que certain tutoriels soient qualifiés comme "vieillissant" car je les trouves pourtant bien...
Est-ce que ce sont des propriétés qui sont obsolètes ou des façons de faire qui ne sont plus admises par le W3C?

Il faut tout lire dans les tutos :

a écrit :

Préambule : ce tutoriel est estampillé "délicat"; Il ne doit pas être considéré comme une référence en la matière car il comporte certains problèmes intrinsèques.

Pour résumer, le menu réalisé à l'aide de ce tutoriel vieillissant ne sera pas exempt de défauts, ni forcément accessible à tous.

Malgré ces problèmes, la raison d'être de ce tutoriel est de pallier à des techniques encore plus problématiques proposées un peu partout sur le Web et qui ne tiennent aucun compte de l'accessibilité ou de l'ergonomie du resultat.

Sachez que ce tutoriel, très demandé, est actuellement en complète refonte. Nous vous conseillons de patienter un peu avant de vous jeter sur les menus déroulants actuellement proposés... Ou d'opter pour le Menu en Accordéon avec JQuery.

Igor a écrit :

Assez malin de ne pas mettre les versions mais grillé par le Firebird

Ah oui tiens ! Je n'avais pas fait gaffe.

Sinon "private joke" (en anglais) peut se traduire par "gag privé".

Pour Firebird c'est l'un des anciens noms de Firefox.

Et pour préciser les problèmes de ce menu on peut citer l'utilisation discutable de listes de définition et surtout le fait qu'un utilisateur sans souris ne peut pas l'utiliser (à l'aide des tabulations clavier).