Signaler

Design de Page web [Résolu]

Posez votre question dezyario 2Messages postés samedi 29 mars 2008Date d'inscription 3 novembre 2017 Dernière intervention - Dernière réponse le 3 nov. 2017 à 00:06 par dezyario
bonjour mes chefs,

svp aidez moi a résoudre ce menu css/html a l'aide de Notepad, qui me fatigue depuis 4 jours enfermés.
je veux que le sous menu "menu2" s'affiche a droite lorsqu'on survol "premier Cycle secondaire".
je vous laisse le code source

<html>
    <head>
        <title>ETUDE</title>
        <meta charset="utf-8" />
  <link rel="stylesheet"  href="menu.css" />
  
    </head>


<body>
<div id="autre1"> 
 <ul id="autre">
   <li id="au"><a href="#" rel="nofollow noopener noreferrer" target="_blank">COLLEGE</a></li>
   <ul id="sous">
       <li id="dell"><a href="#" rel="nofollow noopener noreferrer" target="_blank">Publique laic</a>
                <ul id="del">     
              <li id="ok"><a href="#" rel="nofollow noopener noreferrer" target="_blank">premier Cycle secondaire</a>
        <ul  id="menu2">
                   <li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Classe de 6eme</a></li>
                   <li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Classe de 3eme</a></li>
                 </ul>
     </li>
    </ul>
    </li>
    </ul>        
 </ul>
</div>
</body>
</html>




body { margin: 0px;
  padding:0;}

#autre {
padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 180px;
}

#autre ul  {
   padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}

#autre li {
   background-color:#729EBF; 
   background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
   border-radius: 6px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #333A40
}

#autre li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0
}

#autre a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.2em
}

#autre ul li a, #autre li:hover li a {
  font-size:1em
}

#autre li:hover {
   background: #729EBF
}

#sous li li:hover {
   background: #999;
}

#au ul li {
   border-radius: 0 0 6px 6px;
   border:none;
}

#sous li:hover li {
  max-height: 15em;
}

#del li ul  {
position:absolute;

left:180px;
display:none;
}

#dell ul li:hover ul  {

display: block;
z-index:1;
}


merci a vous
Utile
+0
plus moins
Salut,

Une solution possible à partir de ton css est d'ajouter les règles suivantes :

#del {
  position: relative;
}

#menu2 {
  min-width: 150px;
  top: 0;
}


Bonne journée,
dezyario 2Messages postés samedi 29 mars 2008Date d'inscription 3 novembre 2017 Dernière intervention - 3 nov. 2017 à 00:06
merci beaucoup monsieur, vous etes tres fort
Répondre
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !