5026 sujets

Sémantique web et HTML

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 Smiley smile

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;
		}
Bonjour,
Si tu ajoutes la propriété inline-block à ta classe wrap, cela devrait fonctionner.
Cordialement