Menu Css Verticale

Résolu
Bonjour Tout le monde,
Je suis entrain de réaliser un site web personnel donc j ai effectuer toute les étapes disant que le site est operationelle mais j aimerai en ajouté un menu qui contient des sous menu qui se dévoile en passant la sourie sur le menu parant et comme je suis encore debutant en css j ai du mal a pouvoir le fair seul donc si quelqu un a possede un menu du genre j espere qu il puisse m envoier le code source
J espere que j étais assez clair
Merci;
Configuration: Windows XP
Internet Explorer 6.0

5 réponses

  1. Merci l'Ami;
    Effectivement comme je t ai dis toute a l heure ca marche pas comme je souhaité sur IE mais par contre ca marche nickel sur firefox
    Encore merci pour ton code.
    1. passe ta souris sur contacte et astuce
      sinon moi pour que sa marche je te marque ce que j'ai fais :

      xHTML

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
      <head>
      <title>Yukama ~ Accueil</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
      </head>

      <body>
      <div id="menu">
      <ul>
      <li><a href="index.html">Accueil</a></li>
      <li><a href="#">Contacte</a>
      <li><a href="#">Membre</a>
      <ul>
      <li><a href="#">Connexion</a></li>
      <li><a href="#">Inscription</a></li>
      </ul>
      <li><a href="#">Astuces</a>
      <ul>
      <li><a href="#">Windows XP</a>
      <li><a href="#">Windows Vista</a>
      <li><a href="#">Internet Explorer</a>
      </ul>
      </ul>
      </div>

      </body>
      </html>

      Et le CSS

      #menu ul {
      margin:0;
      padding:0;
      list-style-type:none;
      text-align:center;
      }
      #menu li {
      float:left;
      margin:auto;
      padding:0;
      background-color:#00008b;
      }
      #menu li a {
      display:block;
      width:100px;
      color:white;
      text-decoration:none;
      padding:5px;
      }
      #menu li a:hover {
      color:#FFD700;
      }
      #menu ul li ul {
      display:none;
      }
      #menu ul li:hover ul {
      display:block;
      }
      #menu li:hover ul li {
      float:none;
      }
      #menu li ul {
      position:absolute;
      }
      #menu {
      height:50px;
      }

      Haa oui le fichier .css doit s'appelé design
      1. Merci POur ton aide
        mais j arrive toujour pas acceder au sous menu je vois que le menu principale qui est acceuil membre....
        Par exemple membre ca contient 2 sous menu en clickant ou mm en deplacant la souri sur membre rien ne se passe !!!
        donc j espere s il y aune possibilité que lors du click ou bien du deplacement de la souris sur le menu membre les sous menu connexion et inscription s affiche
        Merci
        PS: j ai tester sur IE6
        1. CSS :

          #menu ul {
          margin:0;
          padding:0;
          list-style-type:none;
          text-align:center;
          }
          #menu li {
          float:left;
          margin:auto;
          padding:0;
          background-color:#00008b;
          }
          #menu li a {
          display:block;
          width:100px;
          color:white;
          text-decoration:none;
          padding:5px;
          }
          #menu li a:hover {
          color:#FFD700;
          }
          #menu ul li ul {
          display:none;
          }
          #menu ul li:hover ul {
          display:block;
          }
          #menu li:hover ul li {
          float:none;
          }
          #menu li ul {
          position:absolute;
          }
          #menu {
          height:50px;
          }

          xHTML:

          <div id="menu">
          <ul>
          <li><a href="index.html">Accueil</a></li>
          <li><a href="#">Contacte</a>
          <li><a href="#">Membre</a>
          <ul>
          <li><a href="#">Connexion</a></li>
          <li><a href="#">Inscription</a></li>
          </ul>
          <li><a href="#">Astuces</a>
          <ul>
          <li><a href="#">Windows XP</a>
          <li><a href="#">Windows Vista</a>
          <li><a href="#">Internet Explorer</a>
          </ul>
          </ul>
          </div>


          Voila j'espere que sa t'aurés été d'utilité