Sujet Précédent Sujet Suivant

Menu déroulant à plusieurs niveaux

Résolu/Fermé
DanielBG Messages postés 14 Date d'inscription mercredi 31 octobre 2012 Statut Membre Dernière intervention 3 avril 2013 - Modifié par DanielBG le 31/10/2012 à 17:45
DanielBG Messages postés 14 Date d'inscription mercredi 31 octobre 2012 Statut Membre Dernière intervention 3 avril 2013 - 12 nov. 2012 à 16:26
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.
A voir également:

3 réponses

Réponse 1 / 3
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
2 nov. 2012 à 12:19
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
Réponse 2 / 3
Blunderer Messages postés 273 Date d'inscription mardi 17 juillet 2012 Statut Membre Dernière intervention 6 décembre 2012 83
2 nov. 2012 à 10:39
Chez moi même le premier menu ne s'affiche pas en passant sur un <li> !
Chez toi si ?
0
Réponse 3 / 3
DanielBG Messages postés 14 Date d'inscription mercredi 31 octobre 2012 Statut Membre Dernière intervention 3 avril 2013 3
12 nov. 2012 à 16:26
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.
@+
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses