Html: Mon menu déroulant ne s'ouvre plus
Résolu
Bonjour,
Je suis en classe de 2nd et je dois crée un site web en html et css, j'ai donc créé un menu déroulant pour accéder a plusieur page et j'ai ensuite mis une video en fond de ma page mais depuis que la video est présente mon menu ne se déroule plus, pouvez-vous m'aider ?
Je suis en classe de 2nd et je dois crée un site web en html et css, j'ai donc créé un menu déroulant pour accéder a plusieur page et j'ai ensuite mis une video en fond de ma page mais depuis que la video est présente mon menu ne se déroule plus, pouvez-vous m'aider ?
2 réponses
-
Bonjour,
Peut-on voir un exemple de code html et css sur lequel tu rencontres ce problème ?
Merci d'utiliser les balises de code stp : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code -
Voila le code html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<link rel="stylesheet" type="text/css" href="test.css">
<title>Valorant.Tracker</title>
</head>
<body>
<nav>
<ul>
<li class="menu-déroulant">
<a href="#">
<div id="logo">
<img src="Logo Valorant.png" width="70px" />
</div>
<div id="Titre1">
<h1>VALORANT</h1>
</div>
<div id="Titre2">
<h1>.TRACKER</h1>
</div>
</a>
<ul class="sous-menu">
<li><a href="#Riot" >Qui est Riot Games</a></li>
<li><a href="#Valorant" >Présentation de Valorant</a></li>
<li><a href="#Map">Carte</a></li>
<li><a href="#Agent">Agents</a></li>
<li><a href="#Arsenal">Arsenal</a></li>
<li><a href="#Social">Social</a></li>
</ul>
</li>
</ul>
</nav>
<div id="video-menu">
<video autoplay="autoplay" muted="" loop="" width="100%">
<source src="Valorantaccueil.mp4">
La video ne fonctionnent pas ? mettez à jour votre navigateur.
</video>
</div>
</body>
</html>
Voila code css
:root {
--hauteur-menu: 70px;
}- {
margin: 0px;
padding: 0px;
font-familly: Montserrat, sans-serif;
}
nav{
width: 100%;
font-size: 18px;
position: fixed;
top: 0;
}
nav > ul{
display: flex;
text-align: center;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.3);
height: var(--hauteur-menu);
}
nav ul{
list-style-type: none;
}
nav > ul > li {
background-color: #101823;
position: relative;
height: 100%;
flex: 1;
}
nav > ul > li > a {
position: absolute;
top: 50%;
right: 98%;
transform: translate(50%, -25%);
}
li a{
text-decoration: none;
color: white;
}
.menu-déroulant > a:after {
font-size: 15px;
margin-left: 7px;
display: inline-block;
}
.sous-menu{
margin-top: var(--hauteur-menu);
width: 100%;
text-align: left;
background-color: #101823;
border-radius: 2px;
overflow: hidden;
max-height: 0;
}
.sous-menu > li > a {
height: 50px;
padding-left: 20px;
width: 100%;
align-items: center;
display: flex;
}
nav > ul > li:hover {
color: #fe4654;
}
.sous-menu > li:hover {
backgroung-color: rgba(255,70,84,255);
}
.sous-menu > li:hover > a{
color: #fe4654;
}
@keyframes apparitionSousMenu{
0%{
box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0);
border-top: 3px solid #fe4654;
}
30%{
box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.3);
}
100%{
max-height: 50em;
border-top: 3px solid #fe4654;
box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.3);
}
}
.menu-déroulant:hover > .sous-menu {
animation: apparitionSousMenu 1s forwards;
}
#Titre1 {
position: relative;
left:120px;
bottom: 55px;
color: white;
font-family: "made_soulmaze_outlineregular";
}
#Titre2 {
position: relative;
left:275px;
bottom: 90px;
color: white;
font-family: "made_soulmaze_brushregular";
}
