accessibilité sous-menu après déplacement du menu

**majestic712** · 10/10/2013, 14h24

Bonjour à toutes et à tous!

je viens ici pour essayer de trouver une solution à mon menu
codé en html + css

-J'ai modifié un code de menu déroulant que j'ai trouvé

Sa position initiale sur une page blanche était "haut + bordure gauche".
J'ai voulu déplacer le menu de gauche à droite, ce que j'ai réussi.

Sauf que maintenant, je ne peux plus accéder aux sous-menu. Ils apparaissent au survol de la souris sur le menu parent mais disparaissent dès que j'essaie de les survoler.

J'ai obtenu ce résultat pour le html (je précise qu'il est en plein travaux, donc des modifs clean à faire)

Html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 <!DOCTYPE HTML!>  <!-- déclaration normale html -->
 
 
<html lang="fr" dir="ltr" class="lang-fr  ltr"> <!-- config lang -->
 
.......
 
<!-- lien avec le fichier css -->
	    	<link rel="stylesheet" href="style.css"> 
	    	<!-- Fin lien avec le fichier css -->
 
	    	<!-- déclaration jquery for menu -->
	    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	    	<!-- Fin déclaration jquery for menu -->
 
....
 
<!-- Déclaration du menu -->
	<div class="menu">
 
<ul>
  <li><a href="apropos.html">Mon Profil</a></li>
    <li><a href="audiovisuel.html">Ausuel</a>
	    <ul>
	      <li><a href="éma.html">Ci</a></li>
	      <li><a href="#">Pcité</a></li>
	      <li><a href="#">Ftionels</a></li>
	    </ul>
  </li>
  <li><a href="#">Multimédia</a>
		<ul>
		  <li><a href="#">Web</a></li>
		  <li><a href="#">Ihie</a></li>
		  <li><a href="#">Dévent</a></li>
		</ul>
  </li>
  <li><a href="#">Ecriture</a>
  <ul>
		  <li><a href="#">rii</a></li>
		  <li><a href="#">Noes</a></li>
		  <li><a href="#">Sous-item 3</a></li>
  </ul>
  </li>
  <li><a class="sp" href="#"> &nbsp;&nbsp;&nbsp;&nbsp; </a>
  </li>
</ul>
 
			<!-- Fin menu -->

le css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/* début menu dbt*/
.menu 
{
 Position:fixed;
 margin: 0 0 -20px 0;
 display: inline-block;
 padding: auto;
 }
 
.menu ul   /* prend en compte tout le menu */
{
 margin:0 0 0 125px; /* x x x position g-d menu */ 
 padding:0;
 font-family:Lucida Handwriting;
 list-style-type:none;
 text-align:center;
}
.menu li  /* prend en compte Niv1 liste + background*/
{
 position:relatif;
 float:left;
 clear:right;
 text-align:center;
 margin:auto;
 padding:auto;
 background:url(images/menu.png);
}
.menu li a /* prend en compte Liste texte */
{
 display:block;
 float:none;
 width:135px;
 color:black;
 text-decoration:none;
 padding:5px;
 border-right: 1px solid black;
 clear:after;
 }
 /*border-top: 1px solid black;*/
 
.menu li a:hover {  /* prend en compte chgt souris curseur menu  : de blanc à noir*/
 color:white;
 }
 
.menu ul li ul{ /* prend en compte disparition sous menu */
 display:none;
 margin: 0 0 0 0;/* position des sous menu */
 }
 
.menu ul li:hover ul {
 display:block;
 
 }
.menu li:hover ul li {
 float:none;
 
 }
 
.menu li ul {
 position:absolute;
 top:auto;
 }
 
	/* Fin menu*/

J'ai essayé plusieurs choses en css mais je n'arrive pas à trouver la solution.

Merci à celles et ceux qui pourront me donner un ptit coup de main.

n'hésitez-pas à me dire si vous voulez plus de code.

A bientôt

**NoSmoking** · 10/10/2013, 20h00

Bonjour,
pas vu le problème si ce n'est que la ligne suivante change la couleur au survol.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.menu li a:hover {  /* prend en compte chgt souris curseur menu  : de blanc à noir*/
 color:white;
 }

Détails dans les cours et tutoriels CSS.

**majestic712** · 10/10/2013, 20h40

merci à toi!

je en pense pas que cette ligne bloque le survol des sous-menu, je vais essayer de l'enlever pour voir si ça change quand même.

En effet, tout à l'air normal sauf que comme tu peux la voir en image3
il y a un soucis de zone de survol ou de clic

**amgharI-** · 10/10/2013, 21h23

Peux tu nous fournir le lien de ton site stp , comme ça on utilise fireBeug pour aller plus vite

**majestic712** · 10/10/2013, 22h21

Merci à toi

Alors j'ai voulu essayer le firebug par moi-même, du coup après ouverture du site (interne) sous Firefox, miracle pas de bug.

ça doit être chrome qui a du mal à gérer le javascript
édit: même bug sous safari, pas encore essayer internet explorer

j'essaie de chercher une solution car il ne faut pas oublier les compatibilités internet explorer et si je la trouve je la poste mais 'hésitez pas à me donner des indices

accessibilité sous-menu après déplacement du menu

CSS

Discussions similaires

Partager

Partager