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 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
<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 : 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
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);
    }
 
}