Bonjour à tous,
Je crée le nouveau site de l'entreprise pour laquelle je travaille et je rencontre 2 problèmes avec le menu déroulant :
1 - Je souhaiterai que mon menu démarre à côté du logo et non en dessous
2 - C'est un menu déroulant et au survol de la souris, rien ne se passe...
Je ne comprends pas où est mon erreur aujourd'hui...
Pensez-vous pouvoir m'aider svp ?
Merci beaucoup & bonne journée :)
Pauline.
Voici mon code HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="utf-8" />
<title>Arts & Etudes - Parce que l'art et les devoirs ne sont pas un luxe !</title>
</head><body>
<!-- Header -->
<div class="header">
<div class="wrap">
<h1>
<div class="Logo">
<a href="#" class="Logo">
<img src="img/logo.png" alt="Logo Arts & Etudes" width="200px" height="201px" />
</a>
</div>
</div>
</h1>
<div class="Menu">
<div class="wrap">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Aide aux devoirs</a></li>
<ul class="submenu">
<li><a href="#">Aide aux devoirs primaire</a></li>
<li><a href="#">Aide aux devoirs collège</a></li>
</ul>
<li><a href="#">Côté Art</a></li>
<ul class="submenu">
<li><a href="#">Dessin-Peinture</a></li>
<li><a href="#">Arts Plastiques</a></li>
<li><a href="#">Audiovisuel</a></li>
<li><a href="#">Théâtre</a></li>
<li><a href="#">BD - Mangas - Comics</a></li>
<li><a href="#">Scrapbooking</a></li>
<li><a href="#">Cours Adulte</a></li>
</ul>
<li><a href="#">Stages Vacances</a></li>
<ul class="submenu">
<li><a href="#">Espace Fartandolle - 3-6 ans</a></li>
<li><a href="#">Espace Artborescence - 6-10 ans</a></li>
<li><a href="#">Espace Art-en-Ciel - 10-17 ans</a></li>
</ul>
<li><a href="#">Lunch Box</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- Section 1 -->
<!-- Section 2 Description -->
<!-- Section 3 Contenu mis en avant -->
<!-- Section 4 Details -->
<!-- Section 5 Big picture -->
<!-- Section 6 A propos -->
<!-- Section 7 Gammes de prix -->
<!-- Footer -->
</body></html>
Voici mon code CSS :
/Font/
{ font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px; }
/**Header**/
body {
margin: 0px;
padding: 0px;
}
.header {
margin: 30px;
width: 100%;
position: relative;
}
h1.Logo{
display: block;
background: transparent url("img/logo.png")no-repeat;
width: 200px;
height: 201px;
text-indent: -9999px;
float: left;
}
.Logo a{
display: block;
width: 200px;
height: 201px;
text-decoration: none;
}
.Menu{
position: absolute;
right: 0
margin: 0 auto;
display: inline-block;
text-align: center;
width: 100%;
}
.Menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.Menu li{
display: inline-block;
width: 100px;
list-style-type: none;
}
.Menu ul li{
list-style: none;
display: inline-block;
margin-right: 5px;
position: relative;
float: left;
}
.Menu ul li a {
display: inline-block;
width: 15px;
text-decoration: none;
text-align: center;
line-height: 1em;
color: black;
padding: 5px 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.Menu a{
margin: 0 30px;
display: inline-block ;
text-decoration: none;
}
.Menu ul li a:hover {
background-color: #e979b5
}
.submenu{
display: none;
}
.Menu li a:hover .submenu{
display: inline-block;
position: absolute;
padding: 0px;
z-index: 100000;
}
.submenu li {
border-bottom: 1px solid #CCC
}
.submenu li a{
padding:15px 30px;
font-size: 13px;
color: #222538;
width: 270px;
}
.Menu ul::after{
content: "";
display: block;
clear: both;
}
3 réponses
Salut,
Sans répondre à ton problème, ton HTML est bourré d'erreurs, les balises fermantes qui ferment rien, des éléments qui ne peuvent pas être placé ici, etc...
<h1>
<div class="Logo">
<a href="#" class="Logo">
<img src="img/logo.png" alt="Logo Arts & Etudes" width="200px" height="201px" />
</a>
</div>
</div><!-- Que ferme cette balide ? Rien, ou alors elle ferme une balise qui est mal située dans l'arbre -->
</h1><!-- UL ne peut pas être un fils de UL, il doit être un fils de LI -->
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Aide aux devoirs</a></li>
<ul class="submenu">
<li><a href="#">Aide aux devoirs primaire</a></li>
<li><a href="#">Aide aux devoirs collège</a></li>
</ul>
<li><a href="#">Côté Art</a></li>
<ul class="submenu">
<li><a href="#">Dessin-Peinture</a></li>
<li><a href="#">Arts Plastiques</a></li>
<li><a href="#">Audiovisuel</a></li>
<li><a href="#">Théâtre</a></li>
<li><a href="#">BD - Mangas - Comics</a></li>
<li><a href="#">Scrapbooking</a></li>
<li><a href="#">Cours Adulte</a></li>
</ul>
</ul>Je ne comprends pas où est mon erreur aujourd'hui...
Malheureusement, ton erreur est globale, tu as des très grosses lacunes en HTML et CSS. Sans ces compétences, tu ne pourras jamais fixer ton code toi même.
Bonjour,
Merci pour votre retour !
Oui je sais que je ne suis qu'une débutante en la matière...
Pour t'aider, voici une navbar que j'ai faite durant un cours d'HTML https://codepen.io/Balsakup/pen/GNQrGv. Elle utilise les flexbox (IE >= 10)