28172 sujets

CSS et mise en forme, CSS3

Probleme dans la navigation de menu deroulant

bonjour à tous
j'ai un problème au niveau de ma liste déroulante lorsque j'ai essayé de naviguer par tabulation ,il ne marche pas pour les sous menu(2 niveau) j'ai essayer de faire la tabulation mais je peux pas résoudre ce probléme
code css

#barremenu
{height:34px;/*border:0.1em black solid*/;margin:0em 0.3em 0.3em 0em;}
div#barremenu a {color:#000000;}
div#barremenu ul {padding: 0; margin:0px; background: white; text-align:center;}
/*div#menu li {background:#CCCCCC}*/
div#barremenu li:hover {background: #EDD;}
div#barremenu li.sousmenu:hover {background: #EBB;}

div#barremenu ul li {position:relative; list-style: none; float:left; border-right:1px solid white;background:#CCC;}
div#barremenu ul ul li a{width:250px;}
div#barremenu ul ul {position: absolute;display:none; width:100px}
div#barremenu li a {text-decoration: none; padding: 4px 4px 4px 4px; display:block;width:auto}
div#barremenu ul.niveau1 li.sousmenu:hover ul.niveau2,div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#barremenu ul.niveau3 {top:-1px; left: 100px;}
div#barremenu ul.niveau3 li { background: #99CCCC}
div#barremenu ul.niveau3 li:hover { background: #99CC00}

code html

<div id="barremenu" class="imagebarremenu"> 
<ul  class="niveau1">
 <li><a href="sommesnous.php"> Qui sommes nous ? </a></li>
<li><a href="Nospartenaires.php"  >Nos partenaires</a></li>
<li class="sousmenu"><a href="" >Les prestations </a>
<ul class="niveau2">
<li><a href="rdinno.php"  >la R&amp;D et Innovation</a></li>
<li><a href="centre.php"  >le Centre de formation &aacute; la conduite</a></li>
<li><a href="observatoire.php"  >l&acute;observatoire des produits et services</a></li>
</ul></li>
 <li><a href="" >l&acute;&eacute;quipe de </a></li>
</ul>
</div>

Modifié par hicham (26 Aug 2009 - 20:36)
il avait une méthode pour faire un menu déroulante accessible c'est à dire il marche sans java script et accessible pour le navigation ??
hicham a écrit :
il avait une méthode pour faire un menu déroulante accessible c'est à dire il marche sans java script et accessible pour le navigation ??

Un menu déroulant accessible se fait avec du JavaScript.
oui mais si le java script est désactiver le menu déroulante ne marche pas ? si le menu avec java script est ce que la tabulation marche?
est ce que vous pouvez m'aider de trouver un exemple
hicham a écrit :
oui mais si le java script est désactiver le menu déroulante ne marche pas ? si le menu avec java script est ce que la tabulation marche?
est ce que vous pouvez m'aider de trouver un exemple


Il est moins grave d'avoir un menu déroulant conçu avec du JS non intrusif qui pemettra tout de même à ceux qui n'ont pas JS de voir le menu complet (car on prendra soin de masquer les éléments à masquer avec JS et non en CSS) que d'avoir un menu déroulant basé sur li:hover qui excluera, d'office, tous les utilisateurs d'IE6.

Pour voir un exemple : Créer un menu “accordéon” avec jQuery
Laurie-Anne a écrit :


Il est moins grave d'avoir un menu déroulant conçu avec du JS non intrusif qui pemettra tout de même à ceux qui n'ont pas JS de voir le menu complet (car on prendra soin de masquer les éléments à masquer avec JS et non en CSS) que d'avoir un menu déroulant basé sur li:hover qui excluera, d'office, tous les utilisateurs d'IE6.

Pour voir un exemple : Créer un menu “accordéon” avec jQuery

merci laurie
mais j'ai marqué que le menu dans le tuto ne marche pas avec tabulation ,je cherche une methode de faire un menu déroulant permet de :
1.Accessible pour navigation de tabulation
2- marche dans le cas de javascript activé
Sujet clos
Aller à