18043 sujets

Questions générales et questions de débutants

Aide à la création d'un menu

J'essai de faire une site pour un ami, et m'y connaissant quasiment pas du tout en css, je cale sur la création du menu...

voici le lien de ma page html et css :

Ma page de menu

Quand je clique sur "Massages", le sous menu s'affiche mal. J'aimerai qu'il soit en osmose avec le bouton "Massages", et que quand je passe ma souris sur les différents sous menu de "Massages", cela ne disparaissent pas comme ça le fait actuellement.

Merci d'avance pour votre aide.
Bonjour.
Voici une solution (Le CSS est dans la page pour une raison d'accessibilité) :
<!DOCTYPE html>
<html><head>
     <style type="text/css">
     body { margin:0 ;
          }
     #menu { display: block;
          height: 50px;
          margin: 15px auto;
          font-size: 24px;
          color: blue;
          text-align: center;
          position: relative;
          }
     #contenu { 
          width:100%; height: 400px;
          background-color: linen;
          }
     ul { list-style-type: none; margin: 0; padding: 0;
          }
    .nav { display: inline-block;
          width: 148px; height: 48px;
          line-height: 48px;
          border: 1px solid gray;
          margin-right: 10px;
          background-color: whitesmoke;          
          overflow: hidden;          
          vertical-align: top;
          transition: 0.5s ease-in-out 0s;
          }
     a {  display: block;
          width: 100%; height: 100%;
          text-decoration: none;
          }
     a:hover { color: red; text-decoration: underline; }
     #massages { cursor: pointer; }
     #massages:hover { height: 250px; }
     </style>
</head><body>
     <ul id="menu">
          <li class="nav"><a href="presentation.html">Présentation</a>
          <li class="nav" id="massages">Massages</a>
              <ul>
                  <li><a href="massage1.html">Massage 1</a>
                  <li><a href="massage2.html">Massage 2</a>
                  <li><a href="massage3.html">Massage 3</a>
                  <li><a href="massage4.html">Massage 4</a>
              </ul>
          <li class="nav"><a href="clairconnaissance.html">Clair-Csce</a></li>
          <li class="nav"><a href="tarifs.html">Tarifs</a></li>
          <li class="nav"><a href="contact.html">Contact</a></li>
     </ul>
     <div id="contenu"></div>  
</body></html>
P.S : Je n'ai pas testé votre code initial, je suis parti d'un CSS existant, que j'ai adapté à votre HTML...
Modifié par ht1cd (17 Aug 2015 - 12:19)
Merci pour votre aide. Comme je vous l'ai dit plus haut le site que je prépare est pour un ami, je verrai avec lui pour l'hébergement par la suite.
Sujet clos
Aller à