Par exemple j'ai le probleme suivant :
Je n'arrive pas à "designer" mon logo "Nos services" en menu déroulant comme les autres boutons. (Voir screenshot)
https://zupimages.net/viewer.php?id=23/03/e4dv.png
Voici le bout de mon code HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="pour un urbanisme plus vert">
<title>Econest - Des conseils pour un avenir plus vert</title>
<link rel="stylesheet" href="style6.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Manrope&family=Montserrat&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" rel="stylesheet">
<!-- Ajout de la balise @media -->
<style>
@media screen and (max-width: 600px) {
/* votre code css ici */
/* Ajout de CSS pour le menu déroulant */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-btn {
/* Autres styles pour le bouton */
}
<script src="Script.js"></script>
}
</style>
</head>
<body>
<header>
<span><a href="index.html"><img src="LogoEcoNest2.png" id="logo" onmouseover="this.src='LogoEcoNest3.png'"
onmouseout="this.src='LogoEcoNest2.png'"></a></span>
<ul><nav class="liste">
<div class="dropdown">
<button class="dropdown-btn">Nos services</button>
<div class="dropdown-content">
<a href="construire.html">Construction</a>
<a href="renover.html">Rénovation</a>
<a href="conseils.html">Conseil</a>
</div>
</div>
<a href="realisations.html"><li class="non-active">Nos réalisations</li></a>
<a href="entreprise.html"><li class="non-active">Notre entreprise</li></a>
<a href="Blog.html"><li class="non-active">Blog</li></a>
</nav></ul>
</header>
et voici mon bout de code CSS :
body {
font-family: 'Abril Fatface', cursive;
font-family: 'Manrope', sans-serif;
}
body, html {
min-height: 100vh;
position: relative;
font-family: 'Manrope', sans-serif;
}
main {
font-family: 'Abril Fatface', cursive;
font-family: 'Manrope', sans-serif;
min-height:100%;
position:relative;
padding-bottom:100px; /* Hauteur du pied de page */
}
.logo:hover {
opacity: 50%;
}
/*
Ce commentaire décrit le style qui sera appliqué
aux éléments de liste du menu de navigation
*/
li {
color: #151632;
text-decoration: none;
list-style: none;
padding: 1px 40px;
}
/*
Ce commentaire décrit le style qui sera appliqué
lorsque l'utilisateur survole un élément de liste
*/
li:hover {
color:white;
background-color:#163114;
border-radius: 25px;
text-decoration: none;
transition: 00.6s ease;
}
/*
Ce commentaire décrit le style qui sera appliqué
à l'image du logo
*/
/*
Ce commentaire décrit le style qui sera appliqué
à la liste de navigation
*/
.liste {
display: flex;
list-style: none;
text-decoration: none;
font-size: 1.3em;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Styles pour le bouton "Nos services" */
.dropdown .dropdown-btn {
color: #151632;
text-decoration: none;
list-style: none;
padding: 1px 40px;
}
que faire ?
