Bonjour les amis, je suis nouveau en programmation Web et en developpant un site Web j'ai rencontre un proobleme. En effet mon diaporamo cache mon menu deroulant. SVP aidez moi

Voici mon code HTML & CSS

<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>

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

-
Edité par AhmedIbrahim21 5 avril 2020 à 11:46:44

Yop !

Avec un z-index adapté non ?

ul{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    z-index:100;
}

.slider{
    width: 960px;
    overflow: hidden;
    z-index:50;
}

Baiawai a écrit:

Yop !

Avec un z-index adapté non ?

ul{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    z-index:100;
}

.slider{
    width: 960px;
    overflow: hidden;
    z-index:50;
}

Merci ca a marche

Bonjour,

Sujet résolu