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 dans mon code aujourd'hui...
Pensez-vous pouvoir m'aider svp ?
Merci beaucoup & bonne journée
Pauline.
Voici mon code HTML :
Voici mon code CSS :
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 dans mon code 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>
</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;
}