Mon slider cache mon menu deroulant

Version imprimable

Bonjour les amis, je suis nouveau en programmation Web et en développant un site Web j'ai rencontre un problème. En effet mon diaporamo cache mon menu déroulant. SVP aidez moi

Voici mon code HTML & 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
<ul>
            <li><a href="index.html" class="menu">ACCUEIL</a>
                <ul class="submenu">
                    <li><a href="pizzaiolo.html">Pizzaiolo</a></li>
                    <li><a href="haramous.html">Club House Haramous</a></li>
                    <li><a href="Allo.html">Allo Pizza</a></li>
                </ul>
            </li>
            <li><a href="pizza.html" class="menu">PIZZAIOLO</a>
                <ul class="submenu">
                    <li><a href="profile">Profil</a></li>
                    <li><a href="goal.html">Objectif</a></li>
                    <li><a href="team.html">Equipe</a></li>
                    <li><a href="sale.html">Point de Vente</a></li>                    
                    <li><a href="culture.html">Culture</a></li>
                </ul>
            </li>
            <li><a href="#" class="menu">MENUS</a>
                <ul class="submenu">
                    <li><a href="pizzaiolo.html">Menu de PIZZAIOLO</a></li>
                    <li><a href="haramous.html">Menu de Club House</a></li>
                    <li><a href="Allo.html">Menu de ALLO PIZZA</a></li>
                </ul>
            </li>
            <li><a href="#" class="menu">CONSOMMATEUR</a>
                <ul class="submenu">
                    <li><a href="community.html">Communauté</a></li>
                </ul>
            </li>
            <li><a href="contact.html" class="menu">CONTACT-NOUS</a></li>
        </ul>
        <div class="slider">
            <div class="slides">
                <div class="slide"><img src="images/diapo/1.jpg" alt=""></div>
                <div class="slide"><img src="images/diapo/2.jpg" alt=""></div>
                <div class="slide"><img src="images/diapo/3.jpg" alt=""></div>
                <div class="slide"><img src="images/diapo/4.jpg" alt=""></div>
            </div>
        </div>

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
ul{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
ul li{
    float: left;
    width: 192px;
    height: 40px;
    background-color: rgb(245, 9, 9);
    opacity: .8;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
}
ul li a{
    text-decoration: none;
    color: white;
    display: block;
}
.submenu a{
    color: black;
    background-color: greenyellow;
}
.submenu a:hover{
    background-color: black;
    color: white;
}
.menu:hover{
    color: yellow;
}
ul li ul li{
    visibility: hidden;
    border-bottom: 1px solid black;
}
ul li:hover ul li{
    visibility: visible;
}
.slide{
    float: left;
}
.slides{
    width: calc(960px * 4);
    animation: glisse 10s infinite;
}
.slider{
    width: 960px;
    overflow: hidden;
}
@keyframes glisse {
    0% {
        transform: translateX(0);
    }
    12,5% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-960px);
    }
    37,5% {
        transform: translateX(-960px);
    }
    50% {
        transform: translateX(-1920px);
    }
    62,5% {
        transform: translateX(-1920px);
    }
    75% {
        transform: translateX(-2880px);
    }
    87,5% {
        transform: translateX(-2880px);
    }
    100% {
        transform: translateX(0);
    }
 
}

05/04/2020, 18h45
NoSmoking
Bonjour,
problème d'empilement que tu peux résoudre simplement en ajoutant au CSS de l'élément <ul> une position:relative et un z-index:1.
Code:

1 2 3 4 5 6 7 8 ul { margin: 0px; padding: 0px; list-style-type: none; z-index: 1; position: relative; }
05/04/2020, 20h37
Ahmedleo01

Ca marche merci énormément vous m'avez sauve. Si c'est pas trop vous demandez j'aimerais vous poser un autre question. En faite je voudrais ajouter un texte sur chaque image de mon slider et je sais pas comment faire, vous pourriez m'aidez ?

Je te propose de modifier légèrement la structure HTML comme suit

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="slider">
  <div class="slides">
    <figure class="slide">
      <img src="images/diapo/1.jpg" alt="">
      <figcaption>Titre image #1</figcaption>
    </figure>
 
    <figure class="slide">
      <img src="images/diapo/2.jpg" alt="">
      <figcaption>Titre image #2</figcaption>
    </figure>
 
    <figure class="slide">
      <img src="images/diapo/3.jpg" alt="">
      <figcaption>Titre image #3</figcaption>
    </figure>
 
    <figure class="slide">
      <img src="images/diapo/4.jpg" alt="">
      <figcaption>Titre image #4</figcaption>
    </figure>
  </div>
</div>

il faut ajouter un peu de CSS pour que cela fonctionne, par exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
figure {
  position: relative;    /* pour servir de référent */
}
figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  font-size: 2.5em;
  color: white;
  background-color: rgba(255,255,255,.3);
}

le texte s'affichera en bas de l'image.

Nota: pour la gestion de l'animation tu peux jeter un oeil à : Diaporama avec défilement automatique

06/04/2020, 21h54
Ahmedleo01

Vous m'aidez vraiment beaucoup je ne saurais jamais vous remercier.