accessibilité sous-menu après déplacement du menu
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:
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="#"> </a>
</li>
</ul>
<!-- Fin menu --> |
le css:
Code:
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
