J'ai réalisé ce CSS/HTML.
.navbar {
width: 100%;
background-color: rgb(151, 44, 44);
overflow: auto;
}
.navbar a {
border-right:1px solid #f5b7b7;
float: left;
padding: 8px;
color: white;
text-decoration: none;
font-size: 1.5vh;
width: 25%; /* Four links of equal widths */
text-align: center;
}
.navbar a:hover {
background-color: rgb(92, 25, 25);
}
.navbar a.active {
background-color: #04AA6D;
}
/* ************************************************************** */
/* DROPDOWN */
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 1.5vh;
border: none;
outline: none;
color: white;
padding: 8px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown:hover .dropbtn {
background-color: rgb(92, 25, 25);
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: rgb(0, 0, 0);
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
width: 100%;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="navbar" id="tree">
<a href= "/">Home1</a>
<a href= "/">Home2</a>
<a href= "/">Home3</a>
<div class="dropdown">
<button class="dropbtn" > TOPICS ▼ </button>
<div class="dropdown-content">
<a href="#">t1</a>
<a href="#">t2</a>
<a href="#">t3</a>
</div>
</div>
</body>
</html>
Mais il y a deux problèmes.
Question 1 - Impossible de centrer le menu déroulant. En utilisant le code ci-dessous, il centre mais crée des barres de défilement sur différentes résolutions et appareils, etc.
.dropdown {
float: left;
overflow: hidden;
position: relative;
transform: translate(150%,0%)
}
Question 2 - Le bouton déroulant ne s'étend pas sur la totalité de sa zone de 25 % (il en va de même pour les autres boutons). c'est-à-dire que le survol ne fonctionne que sur le texte "TOPIC V"
Vous n'avez aucune idée de la raison pour laquelle cela se produit... je ne peux pas le résoudre depuis 2 jours ;[
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pour la première question, utilisez flexbox pour aligner les éléments.
.navbar { ... display: flex; } .dropdown { ... width: 25%; text-align: center; }Pour la deuxième question, la largeur doit être définie sur
100%. Consultez l'extrait de code ci-dessous pour plus de détails..dropdown .dropbtn { ... width: 100%; }.navbar { width: 100%; background-color: rgb(151, 44, 44); overflow: auto; display: flex; } .navbar a { border-right:1px solid #f5b7b7; float: left; padding: 8px; color: white; text-decoration: none; font-size: 1.5vh; width: 25%; /* Four links of equal widths */ text-align: center; } .navbar a:hover { background-color: rgb(92, 25, 25); } .navbar a.active { background-color: #04AA6D; } /* ************************************************************** */ /* DROPDOWN */ .dropdown { float: left; overflow: hidden; width: 25%; text-align: center; } .dropdown .dropbtn { font-size: 1.5vh; border: none; outline: none; color: white; padding: 8px; background-color: inherit; font-family: inherit; margin: 0; width: 100%; } .dropdown:hover .dropbtn { background-color: rgb(92, 25, 25); } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: rgb(0, 0, 0); padding: 12px 16px; text-decoration: none; display: block; text-align: left; width: 100%; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; }