Menu déroulant à plusieurs niveaux [Résolu/Fermé]

Signaler
Messages postés
14
Date d'inscription
mercredi 31 octobre 2012
Statut
Membre
Dernière intervention
3 avril 2013
-
Messages postés
14
Date d'inscription
mercredi 31 octobre 2012
Statut
Membre
Dernière intervention
3 avril 2013
-
Bonjour,
je suis nouveau mais je connais pas mal de trucs en HTML5 CSS3, mais, j'avoue que j'ai un petit problème avec un de mes menus déroulants. J'aimerais faire un menu déroulant à plusieurs niveaux, mais je n'arrive pas à faire plus que le premier niveau.
Voilà mon code HTML:
<ul class="avant_menu"> 
<li><a href="#">Menu 1</a></li> 
 <ul id="menu_deroulant"> 
        <li><a href="#">Sous menu 1</a></li> 
        <li><a href="#">Sous menu 2</a> 
         <ul class="sous-menu"> 
         <li><a href="#">Sous sous menu 1</a></li> 
         <li><a href="#">Sous sous menu 2</a></li> 
         <li><a href="#">Sous sous menu 3</a></li> 
         <li><a href="#">Sous sous menu 4</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Sous menu 3</a></li> 
        <li><a href="#">Sous menu 4</a></li> 
        <li><a href="#">Sous menu 5</a></li> 
        <li><a href="#">Sous menu 6</a></li> 
        <li><a href="#">Sous menu 7</a></li> 
        </ul> 
<li><a href="#">Menu 2</a></li> 
<li><a href="#">Menu 3</a></li> 
</ul> 


Et voilà mon code CSS (c'est là que je pense qu'il y a un problème mais je vois pas quoi):
.avant_menu 
{ 
 list-style-type: none; 
 margin: 0px; 
 margin-left: -50px; 
 margin-top: -5px; 
} 

.avant_menu > li 
{ 
 width: 120px; 
 margin: 5px; 
} 

.avant_menu li a 
{ 
 display: block; 
 padding: 4px 8px; 
 text-decoration: none; 
} 

.avant_menu #menu_deroulant 
{ 
 width: 260px; 
 display: none; 
 list-style-type: none; 
 margin: -50px 0 0 235px; 
 position: absolute; 
 border-style: double; 
 padding-top: 0px; 
 padding-right: 0px; 
 padding-bottom: 5px; 
 padding-left: 5px; 
 background-color: #ffffff; 
 box-shadow: 8px 8px 10px black; 
} 

.avant_menu #menu_deroulant li a 
{ 
 display: block; 
 text-decoration: none; 
} 

.avant_menu li:hover > #menu_deroulant 
{ 
 display: block; 
} 

#menu_deroulant 
{ 
 list-style-type: none; 
 margin: 0px; 
 margin-left: -50px; 
 margin-top: -5px; 
} 

#menu_deroulant > li 
{ 
 width: 120px; 
 margin: 5px; 
} 

#menu_deroulant li a 
{ 
 display: block; 
 padding: 4px 8px; 
 text-decoration: none; 
} 

#menu_deroulant .sous-menu 
{ 
 width: 260px; 
 display: none; 
 list-style-type: none; 
 margin: -50px 0 0 235px; 
 position: absolute; 
 border-style: double; 
 padding-top: 0px; 
 padding-right: 0px; 
 padding-bottom: 5px; 
 padding-left: 5px; 
 background-color: #ffffff; 
 box-shadow: 8px 8px 10px black; 
} 

#menu_deroulant .sous-menu li a 
{ 
 display: block; 
 text-decoration: none; 
} 

#menu_deroulant li:hover > .sous-menu 
{ 
 display: block; 
} 


Je ne sais pas si c'est très clair, mais ce sont mes codes.
Voilà, si vous pouvez m'aider rapidement, je serai très reconnaissant. Merci d'avance.

3 réponses

Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 336
Salut

voila un exemple facile a configurer !
ps les petite images sont en base64 dans la css embraque pour que tu les ai !
passe css externe et met des images png ou reste comme ca ou n en mes pas en enlevant les background-image
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
    <style type="text/css">
    body{
      background-color: #5C5C5C;
    }

    a.titremenu {
      width: 120px;
    }

    ul#verticalmenu, ul#verticalmenu ul{
      margin: 0;
      list-style: none;
      padding: 0;
      background-color: #dedede;
      border-width: 1px;
      border-style: solid;
      border-color: #5f5f5f;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }

    ul#verticalmenu ul{
      display: none;
      position: absolute;
      left: 100%;
      top: 0;
      -moz-box-shadow: 3.5px 3.5px 5px #000000;
      -webkit-box-shadow: 3.5px 3.5px 5px #000000;
      box-shadow: 3.5px 3.5px 5px #000000;
      background-color: #FFFFFF;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-color: #d4d4d4;
      padding: 0 10px 10px;
    }

    ul#verticalmenu li:hover > *{
      display: block;
    }

    ul#verticalmenu li{
      position: relative;
      display: block;
      white-space: nowrap;
      font-size: 0;
    }

    ul#verticalmenu li:hover{
      z-index: 1;
    }

    ul#verticalmenu ul ul{
      position: absolute;
      left: 100%;
      top: 0;
    }

    ul#verticalmenu{
      font-size: 0;
      z-index: 999;
      position: relative;
      display: inline-block;
      zoom: 1;
      *display: inline;
    }

    ul#verticalmenu > li{
      margin: 0;
    }

    ul#verticalmenu a:active, ul#verticalmenu a:focus{
      outline-style: none;
    }

    ul#verticalmenu a{
      display: block;
      vertical-align: middle;
      text-align: left;
      text-decoration: none;
      font: bold 14px Trebuchet MS;
      color: #000000;
      text-shadow: #FFF 0 0 1px;
      cursor: pointer;
      padding: 10px;
      background-color: #c1c1c1;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");
      background-repeat: repeat;
      background-position: 0 0;
      border-width: 1px 0 0 0;
      border-style: solid;
      border-color: #C0C0C0;
    }

    ul#verticalmenu ul li{
      float: none;
      margin: 10px 0 0;
    }

    ul#verticalmenu ul a{
      text-align: left;
      padding: 4px;
      background-color: #FFFFFF;
      background-image: none;
      border-width: 0;
      border-radius: 0px;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      font: 14px Tahoma;
      color: #000;
      text-decoration: none;
    }

    ul#verticalmenu li:hover > a, ul#verticalmenu a.pressed{
      background-color: #0c97e2;
      border-color: #C0C0C0;
      border-style: solid;
      color: #000000;
      text-decoration: none;
      text-shadow: #FFF 0 0 1px;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");
      background-position: 0 100px;
    }

    ul#verticalmenu img{
      border: none;
      vertical-align: middle;
      margin-right: 10px;
    }

    ul#verticalmenu img.over{
      display: none;
    }

    ul#verticalmenu li:hover > a img.def{
      display: none;
    }

    ul#verticalmenu li:hover > a img.over{
      display: inline;
    }

    ul#verticalmenu li a.pressed img.over{
      display: inline;
    }

    ul#verticalmenu li a.pressed img.def{
      display: none;
    }

    ul#verticalmenu span{
      display: block;
      overflow: visible;
      background-position: right center;
      background-repeat: no-repeat;
      padding-right: 0px;
    }

    ul#verticalmenu ul span{
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAAFCAYAAAAdbHdrAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wBFwsUDHLLRP0AAACaSURBVHja7d2xDcMwDATAZwa1ZpMXZRorcAJnAeGuIsBO7eOp6u4kyRgjl06SOWclSVUFAAAAAAAAAHZxHEcnyXmeX4H4aw1zzuQnPAcAAAAAAACA3azgfAXpyydAH2OsRd3a6AAAAAAAAACwnacQ/d5AX63zvtroAAAAAAAAALClpzPu9wZ6ktQ1t+cCAAAAAAAAYEf//kB/A/78KwqdN/nIAAAAAElFTkSuQmCC");
      padding-right: 28px;
    }

    ul#verticalmenu li:hover > a, ul#verticalmenu li > a.pressed{
      background-color: #0c97e2;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");
      background-position: 0 100px;
      border-style: solid;
      border-color: #C0C0C0;
      color: #000000;
      text-decoration: none;
      text-shadow: #FFF 0 0 1px;
    }

    ul#verticalmenu ul li:hover > a, ul#verticalmenu ul li > a.pressed{
      background-color: #FFFFFF;
      background-image: none;
      color: #0978b3;
      text-decoration: none;
    }

    ul#verticalmenu li.toppremier > a{
      border-radius: 5px 5px 0 0;
      -moz-border-radius: 5px 5px 0 0;
      -webkit-border-radius: 5px;
      -webkit-border-bottom-right-radius: 0;
      -webkit-border-bottom-left-radius: 0;
    }

    ul#verticalmenu li.topdernier > a{
      border-radius: 0 0 5px 5px;
      -moz-border-radius: 0 0 5px 5px;
      -webkit-border-radius: 0;
      -webkit-border-bottom-right-radius: 5px;
      -webkit-border-bottom-left-radius: 5px;
    }
    </style>
  </head>
  <body>
    <ul id="verticalmenu">
      <li class="toppremier">
        <a href="#" class="titremenu"><span>menu 0</span></a>
        <ul>
          <li>
            <a href="#">menu 0 0</a>
          </li>
          <li>
            <a href="#"><span>menu 0 1</span></a>
            <ul>
              <li>
                <a href="#">menu 0 1 0</a>
              </li>
              <li>
                <a href="#">menu 0 1 1</a>
              </li>
              <li>
                <a href="#">menu 0 1 2</a>
              </li>
              <li>
                <a href="#">menu 0 1 3</a>
              </li>
              <li>
                <a href="#">menu 0 1 4</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">menu 0 2</a>
          </li>
          <li>
            <a href="#">menu 0 3</a>
          </li>
          <li>
            <a href="#">menu 0 4</a>
          </li>
          <li>
            <a href="#">menu 0 5</a>
          </li>
          <li>
            <a href="#">menu 0 6</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="titremenu">menu 1</a>
      </li>
      <li class="topdernier">
        <a href="#" class="titremenu">menu 2</a>
      </li>
    </ul>
  </body>
</html>


a+
9
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
273
Date d'inscription
mardi 17 juillet 2012
Statut
Membre
Dernière intervention
6 décembre 2012
81
Chez moi même le premier menu ne s'affiche pas en passant sur un <li> !
Chez toi si ?
Messages postés
14
Date d'inscription
mercredi 31 octobre 2012
Statut
Membre
Dernière intervention
3 avril 2013
2
Salut,
Merci beaucoup beaucoup, c'était exactement ça que je voulais,
je vais mettre ça dans mon site.
Encore merci, parce qu'en fait j'ai cherchais sur Google pendant très longtemps et jamais ça ne marchais.
@+