Html: Mon menu déroulant ne s'ouvre plus
Résolu/Fermé
A voir également:
- Animation menu déroulant css
- Editeur html - Télécharger - HTML
- Html download - Télécharger - HTML
- /Var/www/html/index.html ✓ - Forum Linux / Unix
- &Nbsp html ✓ - Forum Webmastering
- [HTML] - á et les autres - Forum HTML
2 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
6 mai 2022 à 12:10
6 mai 2022 à 12:10
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
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";
}
<!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";
}
