Design de Page web

Résolu
dezyario Messages postés 5 Date d'inscription   Statut Membre Dernière intervention   -  
dezyario Messages postés 5 Date d'inscription   Statut Membre Dernière intervention   -
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
A voir également:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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,
3
dezyario Messages postés 5 Date d'inscription   Statut Membre Dernière intervention  
 
merci beaucoup monsieur, vous etes tres fort
0