Menu déroulant à plusieurs niveaux

Résolu
DanielBG Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   -  
DanielBG Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   -
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 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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   Statut Membre Dernière intervention   83
 
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   Statut Membre Dernière intervention   3
 
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
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
menu caché
laurent -
ChariduP -

7 réponses
Effacer le contenue d'une cellule avec liste déroulante
lebutters -
lebutters -

7 réponses