ajouter un menu déroulant multi-niveaux dans le toolbar

[amarid]

bonjour

l'URL du forum, http://amarid.forum-pro.fr/
- la version de votre forum, PHPBB2
- votre statut sur le forum fondateur
- screenshoot


- si vous avez modifié des templates (Si oui, le(s)quel(s)), index_body, index_box, overall_header
- si vous avez du CSS personnalisé, oui
- votre ou vos navigateur(s). Chrome, Safari, Firefox

j'aimerais intégré mon menu déroulant multi-niveaux dans la toolbar mais je n'y arrive pas

[Self]

Bonjour,

Pourrait-on avoir des précisions ? Est-ce le menu que vous avait actuellement en dessous de la toolbar que vous souhaitez intégrer à celle-ci ou alors vous désirez en ajouter un nouveau ?
Quelle est le code que vous avez utilisé pour ajouter les "x" présent dans la toolbar ? Quel est le résultat voulu, quel menus -> sous-menus ?

Cordialement !

[amarid]

d'abord merci de prendre le temps de répondre à ma question pour les codes XXXX cela viens de ceci javascript mais c'est mis en test pour voir le problème c'est qu'avec ce code on ne peut pas avoir plusieurs niveaux dans un menu c'est à dire un sous menu qui renvoi vers un autre sous menu qui renvoi vers un autres sous menu qui ce dernier renvoi sur un sous forum si vous voulais regardé sur le forum il est actif

Code:


$(function (){$(function (){
                 
                              $('#fa_left').after(
                                '<span id="toolbar_add">
        <span style="margin-left:12px;text-align: center;">
                          <select class="optionscolored" style="width: 200px;" onchange="location = this.value">
                           
        <option id="titre_option_non_visible">Le Forum AMARID</option>
 
 <option value ="http://" style="color:blue"> xxxxxxxx</option>
                              <option value="http://  ">xxxxxxxx</option>
                              <option value="http://  "> xxxxxxxx</option>
                              <option value="http://  ">xxxxxxxx</option>
                              <option value="http://  "> xxxxxxxx</option>
                              <option value="http://  "> xxxxxxxx</option>
                              <option value="http://  "> xxxxxxxx</option>
                              <option value="http://  "> xxxxxxxx</option>
           
                            </select>
                        </span>'+'
        <span class="fa_tbMainElement"><a href="xxxxx" style="color:red">xxxxxx</a></span>'+
                           
                                '<span class="fa_tbMainElement"><a href="xxxxxx" style="color:blue">xxxxxxxxxx</a></span>'+
                                '<span class="fa_tbMainElement"><a href="xxxxxx" style="color:black">xxxxxxxxxx</a></span>
        '+'<span class="fa_tbMainElement"><a href="xxxxxx" style="color:#C03000">xxxxxxxxxx </a></span>'+
                                '<span class="fa_tbMainElement"><a href="xxxxxx" style="color:blue">xxxxxx</a></span>
                         
                       
        '
                              )
                 
                        })});

le menu déroulant en dessous de la toolbar je souhaite l'intégrer dedans.
le menu déroulant est en CSS avec une modification dans le template overall_header

le menu déroulant à la base est fait Par un membre de un concurrent adapté sur forum actif (désolé d'avoir cite le concurrent)

[Self]

Bonjour,

Alors dans un premier temps remplacez le code Javascript par celui-ci :

Code:

jQuery(function($){ $('#cssmenu').insertAfter('#fa_left'); });

Dans votre feuille de style CSS cherchez les passages :

Code:

#cssmenu {
   border-radius: 10px;
   display: block;
   font-family: "PT Sans",sans-serif;
   line-height: 1;
   margin: auto;
   position: relative;
   width: 90%;
   z-index: 200;
}

Code:

#cssmenu > ul > li > a {
   color: #000;
   display: block;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
   padding: 15px 20px;
   position: relative;
   text-transform: uppercase;
   z-index: 2;
}

Code:

#cssmenu ul li ul li.active > a, #cssmenu ul li ul li:hover > a {
   color: #F00;
}

Puis remplacez les par :

Code:

#cssmenu {
   border-radius: 10px;
   display: inline-block;
   font-family: "PT Sans",sans-serif;
   line-height: 1;
   margin: auto;
   position: relative;
   width: 85%;
   z-index: 200;
}

Code:

#cssmenu > ul > li > a {
   color: #000;
   display: block;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
   padding: 23px 20px;
   position: relative;
   text-transform: uppercase;
   z-index: 2;
}

Code:

#cssmenu ul li ul li.active > a, #cssmenu ul li ul li:hover > a {
   color: #F00 !important;
}

Et ajoutez à celle-ci ce code :

Code:

#cssmenu li a{ color: #000 !important; }
.fa_tbMainElement, .fa_tbMainElement a{ vertical-align: top !important; }

Cordialement !

[amarid]

ok je teste merci

j'ai pas le premier code je vous met mes codes il aurait ete plus simple que je vous les mette au début excusez moi

Code:


/*====================== fond ==========================*/
#containez {background-color:#01B0F0;background-color:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background-color:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;margin:auto;padding:auto;
width:100%;/*box-shadow:0 6px 30px rgba(0,0,0,0.4);*/  line-height: 1;display: block;font-family: 'PT Sans', sans-serif;border-radius:10px;z-index:200;}

/*====================== menu =========================*/
#cssmenu {background-color:#01B0F0;background-color:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background-color:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;z-index:200;
margin:auto;padding:auto;width:90%;margin-left:auto;margin-right:auto;line-height: 1;display: block;font-family: 'PT Sans', sans-serif;border-radius:10px;}


#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: auto;
}
#cssmenu ul:after,
#cssmenu:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
}
#cssmenu ul li a {
  text-decoration: none;
  display: block;
  margin: 0;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu ul li ul {
  position: absolute;
  left: -9999px;
  top: auto;
}

/*=========================== sous-menus =========================*/
#cssmenu ul li ul li {
  max-height: 0;
  position: absolute;
  -webkit-transition: max-height 0.4s ease-out;
  -moz-transition: max-height 0.4s ease-out;
  -ms-transition: max-height 0.4s ease-out;
  -o-transition: max-height 0.4s ease-out;
  transition: max-height 0.4s ease-out;
  background: #ffffff;
  width: 300px;
  border-right: solid 2px red;
z-index:0;
}
#cssmenu ul li ul li.has-sub:after {
  display: block;
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #000000;
  z-index: 0;
  top: 13px;
  right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
  right: auto;
  left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
  display: block;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border: 3px solid transparent;
  border-left-color: #ffffff;
  z-index: 1;
  top: 15px;
  right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
  right: auto;
  left: 15px;
  border-left-color: transparent;
  border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  color: #000000;
  letter-spacing: 0;
  display: block;
  width: 350px;
  padding: 7px 7px 7px 7px;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
  color: red;
  /*font-weight:bold;*/
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
  background: #4cb6ea;
}
/*=================================== menu droit ================================*/
#cssmenu ul li ul li:hover > ul {
  left: 100%;
  top: 0;
}
/*=================================== menu droit ================================*/
#cssmenu ul li ul li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul > li {
  float: none;
  display: inline-block;
}
#cssmenu.align-center > ul {
  text-align: center;
  font-size: 0;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul {
  float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
  right: 100%;
  left: auto;
}
#cssmenu.align-right ul ul li a {
  text-align: right;
}

/*========================================== onglets ==========================================*/
#cssmenu > ul > li:after {
  Border-radius:5px 5px 0 0;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  z-index: 1;
  background:white;
  -webkit-transition: height .2s;
  -moz-transition: height .2s;
  -ms-transition: height .2s;
  -o-transition: height .2s;
  transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 40px;

}
#cssmenu > ul > li.has-sub > a:after {
  display: block;
  content: "";
  background: #000000;
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 13px;
  right: 14px;
  top: 16px;
}

#cssmenu > ul > li.has-sub > a:before {
  display: block;
  content: "";
  border: 4px solid transparent;
  border-top-color: #4cb6ea;
  z-index: 2;
  height: 0;
  width: 0;
  position: absolute;
  right: 16px;
  top: 21px;
}

#cssmenu > ul > li > a {
  color: #000000;
  padding: 15px 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  z-index: 2;
  position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
  height: 100%;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
  color: #000000;
}
#cssmenu > ul > li.active > a {
  color: #000000;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
  background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
  border-top-color: #000000;
}
#cssmenu > ul > li:hover > ul {
  left: 0;
}
#cssmenu > ul > li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu > ul > li > a {
  display: block; 
}

#cssmenu > ul > li {
  width:auto;
}
#cssmenu > ul > li > ul {
  width: 170px;
  display: block;
}
/*============================================ menu drop mobile ====================================*/
#cssmenu > ul > li > ul > li {
  width: 370px;
  display: block;
} /** 800 - 1024 - 192 dpi**/
@media all and (max-width: 600px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 500px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 500px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 500px), only screen and (min-device-pixel-ratio: 2) and (max-width: 500px), only screen and (min-resolution: 96dpi) and (max-width: 500px), only screen and (min-resolution: 2dppx) and (max-width: 500px) {
  #cssmenu > ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.25s ease-out;
    -moz-transition: max-height 0.25s ease-out;
    -ms-transition: max-height 0.25s ease-out;
    -o-transition: max-height 0.25s ease-out;
    transition: max-height 0.25s ease-out;
  }
  #cssmenu > ul > li > ul {
    width: 100%;
    display: block;
  }
  #cssmenu.align-right ul li a {
    text-align: left;
  }
  #cssmenu > ul > li > ul > li {
    width: 100%;
    display: block;
  }
  #cssmenu.align-right ul ul li a {
    text-align: left;
  }
  #cssmenu > ul > li > ul > li > a {
    width: 100%;
    display: block;
  }
  #cssmenu ul li ul li a {
    width: 100%;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu.align-center > ul > li {
    display: block;
  }
  #cssmenu > ul.open {
    max-height: 1000px;
    border-top: 1px solid rgba(110, 110, 110, 0.25);
  }
  #cssmenu ul {
    width: 100%;
  }
  #cssmenu ul > li {
    float: none;
    width: 100%;
  }
  #cssmenu ul li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 20px;

  }
  #cssmenu ul > li:after {
    display: none;
  }
  #cssmenu ul li.has-sub > a:after,
  #cssmenu ul li.has-sub > a:before,
  #cssmenu ul li ul li.has-sub:after,
  #cssmenu ul li ul li.has-sub:before {
    display: none;
  }
  #cssmenu ul li ul,
  #cssmenu ul li ul li ul,
  #cssmenu ul li ul li:hover > ul,
  #cssmenu.align-right ul li ul,
  #cssmenu.align-right ul li ul li ul,
  #cssmenu.align-right ul li ul li:hover > ul {
    left: 0;
    position: relative;
    right: auto;
  }
  #cssmenu ul li ul li,
  #cssmenu ul li:hover > ul > li {
    max-height: 999px;
    position: relative;
    background: none;
  }
  #cssmenu ul li ul li a {
    padding: 8px 20px 8px 35px;
    color: #ffffff;
  }
  #cssmenu ul li ul ul li a {
    padding: 8px 20px 8px 50px;
  }
  #cssmenu ul li ul li:hover > a {
    color: #000000;
  }
  #cssmenu #menu-button {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #ffffff;
    cursor: pointer;
  }
  #cssmenu #menu-button:after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    right: 20px;
    top: 16px;
  }
  #cssmenu #menu-button:before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    right: 20px;
    top: 26px;
  }
}


[Self]

Bonjour,

Changez donc ce code par ceci :

Code:

/*====================== fond ==========================*/
#containez {background-color:#01B0F0;background-color:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background-color:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;margin:auto;padding:auto;
width:100%;/*box-shadow:0 6px 30px rgba(0,0,0,0.4);*/  line-height: 1;display: block;font-family: 'PT Sans', sans-serif;border-radius:10px;z-index:200;}

/*====================== menu =========================*/
#cssmenu {background-color:#01B0F0;background-color:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background-color:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;z-index:200;
margin:auto;padding:auto;width:85%;margin-left:auto;margin-right:auto;line-height: 1;display: inline-block;font-family: 'PT Sans', sans-serif;border-radius:10px;}


#cssmenu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: block;
   width: auto;
}
#cssmenu ul:after,
#cssmenu:after {
   content: " ";
   display: block;
   font-size: 0;
   height: 0;
   clear: both;
   visibility: hidden;
}
#cssmenu ul li {
   margin: 0;
   padding: 0;
   display: block;
   position: relative;
}
#cssmenu ul li a {
   text-decoration: none;
   display: block;
   margin: 0;
   -webkit-transition: color .2s ease;
   -moz-transition: color .2s ease;
   -ms-transition: color .2s ease;
   -o-transition: color .2s ease;
   transition: color .2s ease;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
#cssmenu li a{ color: #000 !important; }
.fa_tbMainElement, .fa_tbMainElement a{ vertical-align: top !important; }
#cssmenu ul li ul {
   position: absolute;
   left: -9999px;
   top: auto;
}

/*=========================== sous-menus =========================*/
#cssmenu ul li ul li {
   max-height: 0;
   position: absolute;
   -webkit-transition: max-height 0.4s ease-out;
   -moz-transition: max-height 0.4s ease-out;
   -ms-transition: max-height 0.4s ease-out;
   -o-transition: max-height 0.4s ease-out;
   transition: max-height 0.4s ease-out;
   background: #ffffff;
   width: 300px;
   border-right: solid 2px red;
z-index:0;
}
#cssmenu ul li ul li.has-sub:after {
   display: block;
   position: absolute;
   content: "";
   height: 10px;
   width: 10px;
   border-radius: 5px;
   background: #000000;
   z-index: 0;
   top: 13px;
   right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
   right: auto;
   left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
   display: block;
   position: absolute;
   content: "";
   height: 0;
   width: 0;
   border: 3px solid transparent;
   border-left-color: #ffffff;
   z-index: 1;
   top: 15px;
   right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
   right: auto;
   left: 15px;
   border-left-color: transparent;
   border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
   font-size: 14px;
   font-weight: 400;
   text-transform: none;
   color: #000000;
   letter-spacing: 0;
   display: block;
   width: 350px;
   padding: 7px 7px 7px 7px;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
   color: red !important;
   /*font-weight:bold;*/
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
   background: #4cb6ea;
}
/*=================================== menu droit ================================*/
#cssmenu ul li ul li:hover > ul {
   left: 100%;
   top: 0;
}
/*=================================== menu droit ================================*/
#cssmenu ul li ul li:hover > ul > li {
   max-height: 72px;
   position: relative;
}
#cssmenu > ul > li {
   float: left;
}
#cssmenu.align-center > ul > li {
   float: none;
   display: inline-block;
}
#cssmenu.align-center > ul {
   text-align: center;
   font-size: 0;
}
#cssmenu.align-center ul ul {
   text-align: left;
}
#cssmenu.align-right > ul {
   float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
   left: auto;
   right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
   right: 100%;
   left: auto;
}
#cssmenu.align-right ul ul li a {
   text-align: right;
}

/*========================================== onglets ==========================================*/
#cssmenu > ul > li:after {
   Border-radius:5px 5px 0 0;
   content: "";
   display: block;
   position: absolute;
   width: 100%;
   height: 0;
   top: 0;
   z-index: 1;
   background:white;
   -webkit-transition: height .2s;
   -moz-transition: height .2s;
   -ms-transition: height .2s;
   -o-transition: height .2s;
   transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
   padding-right: 40px;

}
#cssmenu > ul > li.has-sub > a:after {
   display: block;
   content: "";
   background: #000000;
   height: 12px;
   width: 12px;
   position: absolute;
   border-radius: 13px;
   right: 14px;
   top: 16px;
}

#cssmenu > ul > li.has-sub > a:before {
   display: block;
   content: "";
   border: 4px solid transparent;
   border-top-color: #4cb6ea;
   z-index: 2;
   height: 0;
   width: 0;
   position: absolute;
   right: 16px;
   top: 21px;
}

#cssmenu > ul > li > a {
   color: #000000;
   padding: 23px 20px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   font-size: 12px;
   z-index: 2;
   position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
   height: 100%;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
   color: #000000;
}
#cssmenu > ul > li.active > a {
   color: #000000;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
   background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
   border-top-color: #000000;
}
#cssmenu > ul > li:hover > ul {
   left: 0;
}
#cssmenu > ul > li:hover > ul > li {
   max-height: 72px;
   position: relative;
}
#cssmenu #menu-button {
   display: none;
}
#cssmenu > ul > li > a {
   display: block;
}

#cssmenu > ul > li {
   width:auto;
}
#cssmenu > ul > li > ul {
   width: 170px;
   display: block;
}
/*============================================ menu drop mobile ====================================*/
#cssmenu > ul > li > ul > li {
   width: 370px;
   display: block;
} /** 800 - 1024 - 192 dpi**/
@media all and (max-width: 600px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 500px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 500px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 500px), only screen and (min-device-pixel-ratio: 2) and (max-width: 500px), only screen and (min-resolution: 96dpi) and (max-width: 500px), only screen and (min-resolution: 2dppx) and (max-width: 500px) {
   #cssmenu > ul {
      max-height: 0;
      overflow: hidden;
      -webkit-transition: max-height 0.25s ease-out;
      -moz-transition: max-height 0.25s ease-out;
      -ms-transition: max-height 0.25s ease-out;
      -o-transition: max-height 0.25s ease-out;
      transition: max-height 0.25s ease-out;
   }
   #cssmenu > ul > li > ul {
      width: 100%;
      display: block;
   }
   #cssmenu.align-right ul li a {
      text-align: left;
   }
   #cssmenu > ul > li > ul > li {
      width: 100%;
      display: block;
   }
   #cssmenu.align-right ul ul li a {
      text-align: left;
   }
   #cssmenu > ul > li > ul > li > a {
      width: 100%;
      display: block;
   }
   #cssmenu ul li ul li a {
      width: 100%;
   }
   #cssmenu.align-center > ul {
      text-align: left;
   }
   #cssmenu.align-center > ul > li {
      display: block;
   }
   #cssmenu > ul.open {
      max-height: 1000px;
      border-top: 1px solid rgba(110, 110, 110, 0.25);
   }
   #cssmenu ul {
      width: 100%;
   }
   #cssmenu ul > li {
      float: none;
      width: 100%;
   }
   #cssmenu ul li a {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      padding: 12px 20px;

   }
   #cssmenu ul > li:after {
      display: none;
   }
   #cssmenu ul li.has-sub > a:after,
   #cssmenu ul li.has-sub > a:before,
   #cssmenu ul li ul li.has-sub:after,
   #cssmenu ul li ul li.has-sub:before {
      display: none;
   }
   #cssmenu ul li ul,
   #cssmenu ul li ul li ul,
   #cssmenu ul li ul li:hover > ul,
   #cssmenu.align-right ul li ul,
   #cssmenu.align-right ul li ul li ul,
   #cssmenu.align-right ul li ul li:hover > ul {
      left: 0;
      position: relative;
      right: auto;
   }
   #cssmenu ul li ul li,
   #cssmenu ul li:hover > ul > li {
      max-height: 999px;
      position: relative;
      background: none;
   }
   #cssmenu ul li ul li a {
      padding: 8px 20px 8px 35px;
      color: #ffffff;
   }
   #cssmenu ul li ul ul li a {
      padding: 8px 20px 8px 50px;
   }
   #cssmenu ul li ul li:hover > a {
      color: #000000;
   }
   #cssmenu #menu-button {
      display: block;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      padding: 15px 20px;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 1px;
      color: #ffffff;
      cursor: pointer;
   }
   #cssmenu #menu-button:after {
      display: block;
      content: '';
      position: absolute;
      height: 3px;
      width: 22px;
      border-top: 2px solid #ffffff;
      border-bottom: 2px solid #ffffff;
      right: 20px;
      top: 16px;
   }
   #cssmenu #menu-button:before {
      display: block;
      content: '';
      position: absolute;
      height: 3px;
      width: 22px;
      border-top: 2px solid #ffffff;
      right: 20px;
      top: 26px;
   }
}

[amarid]

d'abord merci de me répondre ci vite
cela ne fonctionne pas



mon css corrige avec votre code j'ai bien sur mis le code javascript

Code:


/*====================== fond ==========================*/
#containez {background-color:#01B0F0;background-color:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background-color:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;margin:auto;padding:auto;
width:100%;/*box-shadow:0 6px 30px rgba(0,0,0,0.4);*/  line-height: 1;display: block;font-family: 'PT Sans', sans-serif;border-radius:10px;z-index:200;}

/*====================== menu =========================*/
#cssmenu {background-color:#01B0F0;background-color:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background-color:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;z-index:200;
margin:auto;padding:auto;width:85%;margin-left:auto;margin-right:auto;line-height: 1;display: inline-block;font-family: 'PT Sans', sans-serif;border-radius:10px;}


#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: auto;
}
#cssmenu ul:after,
#cssmenu:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
}
#cssmenu ul li a {
  text-decoration: none;
  display: block;
  margin: 0;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu li a{ color: #000 !important; }
.fa_tbMainElement, .fa_tbMainElement a{ vertical-align: top !important; }
#cssmenu ul li ul {
  position: absolute;
  left: -9999px;
  top: auto;
}

/*=========================== sous-menus =========================*/
#cssmenu ul li ul li {
  max-height: 0;
  position: absolute;
  -webkit-transition: max-height 0.4s ease-out;
  -moz-transition: max-height 0.4s ease-out;
  -ms-transition: max-height 0.4s ease-out;
  -o-transition: max-height 0.4s ease-out;
  transition: max-height 0.4s ease-out;
  background: #ffffff;
  width: 300px;
  border-right: solid 2px red;
z-index:0;
}
#cssmenu ul li ul li.has-sub:after {
  display: block;
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #000000;
  z-index: 0;
  top: 13px;
  right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
  right: auto;
  left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
  display: block;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border: 3px solid transparent;
  border-left-color: #ffffff;
  z-index: 1;
  top: 15px;
  right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
  right: auto;
  left: 15px;
  border-left-color: transparent;
  border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  color: #000000;
  letter-spacing: 0;
  display: block;
  width: 350px;
  padding: 7px 7px 7px 7px;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
  color: red !important;
  /*font-weight:bold;*/
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
  background: #4cb6ea;
}
/*=================================== menu droit ================================*/
#cssmenu ul li ul li:hover > ul {
  left: 100%;
  top: 0;
}
/*=================================== menu droit ================================*/
#cssmenu ul li ul li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul > li {
  float: none;
  display: inline-block;
}
#cssmenu.align-center > ul {
  text-align: center;
  font-size: 0;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul {
  float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
  right: 100%;
  left: auto;
}
#cssmenu.align-right ul ul li a {
  text-align: right;
}

/*========================================== onglets ==========================================*/
#cssmenu > ul > li:after {
  Border-radius:5px 5px 0 0;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  z-index: 1;
  background:white;
  -webkit-transition: height .2s;
  -moz-transition: height .2s;
  -ms-transition: height .2s;
  -o-transition: height .2s;
  transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 40px;

}
#cssmenu > ul > li.has-sub > a:after {
  display: block;
  content: "";
  background: #000000;
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 13px;
  right: 14px;
  top: 16px;
}

#cssmenu > ul > li.has-sub > a:before {
  display: block;
  content: "";
  border: 4px solid transparent;
  border-top-color: #4cb6ea;
  z-index: 2;
  height: 0;
  width: 0;
  position: absolute;
  right: 16px;
  top: 21px;
}

#cssmenu > ul > li > a {
  color: #000000;
  padding: 23px 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  z-index: 2;
  position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
  height: 100%;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
  color: #000000;
}
#cssmenu > ul > li.active > a {
  color: #000000;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
  background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
  border-top-color: #000000;
}
#cssmenu > ul > li:hover > ul {
  left: 0;
}
#cssmenu > ul > li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu > ul > li > a {
  display: block;
}

#cssmenu > ul > li {
  width:auto;
}
#cssmenu > ul > li > ul {
  width: 170px;
  display: block;
}
/*============================================ menu drop mobile ====================================*/
#cssmenu > ul > li > ul > li {
  width: 370px;
  display: block;
} /** 800 - 1024 - 192 dpi**/
@media all and (max-width: 600px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 500px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 500px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 500px), only screen and (min-device-pixel-ratio: 2) and (max-width: 500px), only screen and (min-resolution: 96dpi) and (max-width: 500px), only screen and (min-resolution: 2dppx) and (max-width: 500px) {
  #cssmenu > ul {
      max-height: 0;
      overflow: hidden;
      -webkit-transition: max-height 0.25s ease-out;
      -moz-transition: max-height 0.25s ease-out;
      -ms-transition: max-height 0.25s ease-out;
      -o-transition: max-height 0.25s ease-out;
      transition: max-height 0.25s ease-out;
  }
  #cssmenu > ul > li > ul {
      width: 100%;
      display: block;
  }
  #cssmenu.align-right ul li a {
      text-align: left;
  }
  #cssmenu > ul > li > ul > li {
      width: 100%;
      display: block;
  }
  #cssmenu.align-right ul ul li a {
      text-align: left;
  }
  #cssmenu > ul > li > ul > li > a {
      width: 100%;
      display: block;
  }
  #cssmenu ul li ul li a {
      width: 100%;
  }
  #cssmenu.align-center > ul {
      text-align: left;
  }
  #cssmenu.align-center > ul > li {
      display: block;
  }
  #cssmenu > ul.open {
      max-height: 1000px;
      border-top: 1px solid rgba(110, 110, 110, 0.25);
  }
  #cssmenu ul {
      width: 100%;
  }
  #cssmenu ul > li {
      float: none;
      width: 100%;
  }
  #cssmenu ul li a {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      padding: 12px 20px;

  }
  #cssmenu ul > li:after {
      display: none;
  }
  #cssmenu ul li.has-sub > a:after,
  #cssmenu ul li.has-sub > a:before,
  #cssmenu ul li ul li.has-sub:after,
  #cssmenu ul li ul li.has-sub:before {
      display: none;
  }
  #cssmenu ul li ul,
  #cssmenu ul li ul li ul,
  #cssmenu ul li ul li:hover > ul,
  #cssmenu.align-right ul li ul,
  #cssmenu.align-right ul li ul li ul,
  #cssmenu.align-right ul li ul li:hover > ul {
      left: 0;
      position: relative;
      right: auto;
  }
  #cssmenu ul li ul li,
  #cssmenu ul li:hover > ul > li {
      max-height: 999px;
      position: relative;
      background: none;
  }
  #cssmenu ul li ul li a {
      padding: 8px 20px 8px 35px;
      color: #ffffff;
  }
  #cssmenu ul li ul ul li a {
      padding: 8px 20px 8px 50px;
  }
  #cssmenu ul li ul li:hover > a {
      color: #000000;
  }
  #cssmenu #menu-button {
      display: block;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      padding: 15px 20px;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 1px;
      color: #ffffff;
      cursor: pointer;
  }
  #cssmenu #menu-button:after {
      display: block;
      content: '';
      position: absolute;
      height: 3px;
      width: 22px;
      border-top: 2px solid #ffffff;
      border-bottom: 2px solid #ffffff;
      right: 20px;
      top: 16px;
  }
  #cssmenu #menu-button:before {
      display: block;
      content: '';
      position: absolute;
      height: 3px;
      width: 22px;
      border-top: 2px solid #ffffff;
      right: 20px;
      top: 26px;
  }
}

[amarid]

d'abord merci de me répondre si vite le seul changement ce sont les fleches des sous menus qui sont un eu remontées
cela ne fonctionne pas



mon css corrige avec votre code j'ai bien sur mis le code javascript

Code:


/*====================== fond ==========================*/
#containez {background-color:#01B0F0;background-color:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background-color:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;margin:auto;padding:auto;
width:100%;/*box-shadow:0 6px 30px rgba(0,0,0,0.4);*/  line-height: 1;display: block;font-family: 'PT Sans', sans-serif;border-radius:10px;z-index:200;}

/*====================== menu =========================*/
#cssmenu {background-color:#01B0F0;background-color:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background-color:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;z-index:200;
margin:auto;padding:auto;width:85%;margin-left:auto;margin-right:auto;line-height: 1;display: inline-block;font-family: 'PT Sans', sans-serif;border-radius:10px;}


#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: auto;
}
#cssmenu ul:after,
#cssmenu:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
}
#cssmenu ul li a {
  text-decoration: none;
  display: block;
  margin: 0;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu li a{ color: #000 !important; }
.fa_tbMainElement, .fa_tbMainElement a{ vertical-align: top !important; }
#cssmenu ul li ul {
  position: absolute;
  left: -9999px;
  top: auto;
}

/*=========================== sous-menus =========================*/
#cssmenu ul li ul li {
  max-height: 0;
  position: absolute;
  -webkit-transition: max-height 0.4s ease-out;
  -moz-transition: max-height 0.4s ease-out;
  -ms-transition: max-height 0.4s ease-out;
  -o-transition: max-height 0.4s ease-out;
  transition: max-height 0.4s ease-out;
  background: #ffffff;
  width: 300px;
  border-right: solid 2px red;
z-index:0;
}
#cssmenu ul li ul li.has-sub:after {
  display: block;
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #000000;
  z-index: 0;
  top: 13px;
  right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
  right: auto;
  left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
  display: block;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border: 3px solid transparent;
  border-left-color: #ffffff;
  z-index: 1;
  top: 15px;
  right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
  right: auto;
  left: 15px;
  border-left-color: transparent;
  border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  color: #000000;
  letter-spacing: 0;
  display: block;
  width: 350px;
  padding: 7px 7px 7px 7px;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
  color: red !important;
  /*font-weight:bold;*/
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
  background: #4cb6ea;
}
/*=================================== menu droit ================================*/
#cssmenu ul li ul li:hover > ul {
  left: 100%;
  top: 0;
}
/*=================================== menu droit ================================*/
#cssmenu ul li ul li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul > li {
  float: none;
  display: inline-block;
}
#cssmenu.align-center > ul {
  text-align: center;
  font-size: 0;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul {
  float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
  right: 100%;
  left: auto;
}
#cssmenu.align-right ul ul li a {
  text-align: right;
}

/*========================================== onglets ==========================================*/
#cssmenu > ul > li:after {
  Border-radius:5px 5px 0 0;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  z-index: 1;
  background:white;
  -webkit-transition: height .2s;
  -moz-transition: height .2s;
  -ms-transition: height .2s;
  -o-transition: height .2s;
  transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 40px;

}
#cssmenu > ul > li.has-sub > a:after {
  display: block;
  content: "";
  background: #000000;
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 13px;
  right: 14px;
  top: 16px;
}

#cssmenu > ul > li.has-sub > a:before {
  display: block;
  content: "";
  border: 4px solid transparent;
  border-top-color: #4cb6ea;
  z-index: 2;
  height: 0;
  width: 0;
  position: absolute;
  right: 16px;
  top: 21px;
}

#cssmenu > ul > li > a {
  color: #000000;
  padding: 23px 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  z-index: 2;
  position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
  height: 100%;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
  color: #000000;
}
#cssmenu > ul > li.active > a {
  color: #000000;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
  background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
  border-top-color: #000000;
}
#cssmenu > ul > li:hover > ul {
  left: 0;
}
#cssmenu > ul > li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu > ul > li > a {
  display: block;
}

#cssmenu > ul > li {
  width:auto;
}
#cssmenu > ul > li > ul {
  width: 170px;
  display: block;
}
/*============================================ menu drop mobile ====================================*/
#cssmenu > ul > li > ul > li {
  width: 370px;
  display: block;
} /** 800 - 1024 - 192 dpi**/
@media all and (max-width: 600px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 500px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 500px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 500px), only screen and (min-device-pixel-ratio: 2) and (max-width: 500px), only screen and (min-resolution: 96dpi) and (max-width: 500px), only screen and (min-resolution: 2dppx) and (max-width: 500px) {
  #cssmenu > ul {
      max-height: 0;
      overflow: hidden;
      -webkit-transition: max-height 0.25s ease-out;
      -moz-transition: max-height 0.25s ease-out;
      -ms-transition: max-height 0.25s ease-out;
      -o-transition: max-height 0.25s ease-out;
      transition: max-height 0.25s ease-out;
  }
  #cssmenu > ul > li > ul {
      width: 100%;
      display: block;
  }
  #cssmenu.align-right ul li a {
      text-align: left;
  }
  #cssmenu > ul > li > ul > li {
      width: 100%;
      display: block;
  }
  #cssmenu.align-right ul ul li a {
      text-align: left;
  }
  #cssmenu > ul > li > ul > li > a {
      width: 100%;
      display: block;
  }
  #cssmenu ul li ul li a {
      width: 100%;
  }
  #cssmenu.align-center > ul {
      text-align: left;
  }
  #cssmenu.align-center > ul > li {
      display: block;
  }
  #cssmenu > ul.open {
      max-height: 1000px;
      border-top: 1px solid rgba(110, 110, 110, 0.25);
  }
  #cssmenu ul {
      width: 100%;
  }
  #cssmenu ul > li {
      float: none;
      width: 100%;
  }
  #cssmenu ul li a {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      padding: 12px 20px;

  }
  #cssmenu ul > li:after {
      display: none;
  }
  #cssmenu ul li.has-sub > a:after,
  #cssmenu ul li.has-sub > a:before,
  #cssmenu ul li ul li.has-sub:after,
  #cssmenu ul li ul li.has-sub:before {
      display: none;
  }
  #cssmenu ul li ul,
  #cssmenu ul li ul li ul,
  #cssmenu ul li ul li:hover > ul,
  #cssmenu.align-right ul li ul,
  #cssmenu.align-right ul li ul li ul,
  #cssmenu.align-right ul li ul li:hover > ul {
      left: 0;
      position: relative;
      right: auto;
  }
  #cssmenu ul li ul li,
  #cssmenu ul li:hover > ul > li {
      max-height: 999px;
      position: relative;
      background: none;
  }
  #cssmenu ul li ul li a {
      padding: 8px 20px 8px 35px;
      color: #ffffff;
  }
  #cssmenu ul li ul ul li a {
      padding: 8px 20px 8px 50px;
  }
  #cssmenu ul li ul li:hover > a {
      color: #000000;
  }
  #cssmenu #menu-button {
      display: block;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      padding: 15px 20px;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 1px;
      color: #ffffff;
      cursor: pointer;
  }
  #cssmenu #menu-button:after {
      display: block;
      content: '';
      position: absolute;
      height: 3px;
      width: 22px;
      border-top: 2px solid #ffffff;
      border-bottom: 2px solid #ffffff;
      right: 20px;
      top: 16px;
  }
  #cssmenu #menu-button:before {
      display: block;
      content: '';
      position: absolute;
      height: 3px;
      width: 22px;
      border-top: 2px solid #ffffff;
      right: 20px;
      top: 26px;
  }
}

[Self]

Bonjour,

Pourriez vous me donnez votre template overall_header s'il vous plait ?

[amarid]

merci le voici

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
     
 
</head>
 
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
  <!--modif facebook-->
  <script>  window.fbAsyncInit = function() {    FB.init({      appId      : '1508673316038831',      xfbml      : true,      version    : 'v2.3'    });  };    (function(d, s, id){      var js, fjs = d.getElementsByTagName(s)[0];      if (d.getElementById(id)) {return;}      js = d.createElement(s); js.id = id;      js.src = "//connect.facebook.net/en_US/sdk.js";      fjs.parentNode.insertBefore(js, fjs);    }(document, 'script', 'facebook-jssdk')); </script>
  <!--fin facebook-->
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup" style="z-index: 10000 !important;">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}
 
  <!--====================================================================================-->
  <!-- DEBUT R-MAX --><!-- BEGIN switch_user_logged_in --><!-- onglet facebbok et twitter -->
  <!--===============-->
  <!-- volet twitter -->
  <!--===============-->
<div id="voletfermer"style="z-index: 300 !important;">
  <div id="volet">
      <p><a class="twitter-timeline" href="https://twitter.com/amarid33" data-widget-id="603619457227988992">Tweets de @amarid33</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>
    <a href="#volet" class="ouvrir"><b>TWITTER</b></a>
    <a href="#voletfermer" class="fermer"><b>FERMER</b></a>
  </div>
</div>
  <!--================-->
  <!-- volet facebook -->
  <!--================-->
  <div id="voletfermer_1"style="z-index:299 !important;">
  <div id="volet_1">
   
   
   
   
    <a href="#volet_1" class="ouvrir"><b>FACEBOOK</b></a>
    <a href="#voletfermer_1" class="fermer"><b>FERMER</b></a>
  </div>
</div>
  <!--================================-->
  <!-- fin onglet facebook et twitter -->
  <!--================================-->
  <!--================================-->
  <!--======= onglet calendar=========-->
  <!--================================-->
 <!--- <div id="voletfermer_2"style="z-index:300 !important;">
  <div id="volet_2">
   
    <iframe width="240" height="500" src="http://amarid.forum-pro.fr/calendar_scheduler.forum?d=1433023200" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
        <a href="#volet_2" class="ouvrir_1"><b>CALENDRIER</b></a>
    <a href="#voletfermer_2" class="fermer_3"><b>FERMER</b></a>
  </div>
</div> --->
  <!--================================-->
  <!--=========fin calendar===========-->
  <!--================================-->
 
  <!-- END switch_user_logged_in --> <!--FIN R-MAX -->
  <!--=============================================-->
 
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
                          <!-- DÉBUT DU MENU -->
                          <br />
<table class="forumline_1" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
  <tr>
    <td>
<div id="containez">
<div id="cssmenu"class="align-center">
<ul>


<li><a href="{U_INDEX}"><span>Home</span></a></li>
 
    <!-- BEGIN switch_user_logged_out -->
            <li><a href="{U_REGISTER}"><span>S'inscrire</span></a></li>
            <li><a href="{U_LOGIN_LOGOUT}"><span>{L_LOGIN_LOGOUT}</span></a></li>
    <!-- END switch_user_logged_out -->

    <!-- BEGIN switch_user_logged_in -->
            <li class='has-sub'><a href="" id="">Menu Membre</span></a>
                <ul>
                  <li><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li>
                  <li> <a href="{U_PRIVATEMSGS}">Votre messagerie du forum</a></li>
                  <li><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></li>
                    <li><a href="{U_VIEWONLINE}">Qui est en ligne</a></li>
                    <li><a href="{U_MEMBERLIST}">Liste des membres</a></li>
                <li class='last'><a href="{U_GROUP_CP}">Groupes du forum</a></li>
                   
</ul>
</li>

            <!-- END switch_user_logged_in -->

       
<li class='has-sub'><a href="{U_INDEX}"><span>Adhérent(e)s</span></a>
 <ul>
  <li><a href="http://amarid.forum-pro.fr/f4-adherentes-posez-vos-questions">Adhérentes posez vos questions</span></a>
  <li><a href="http://amarid.forum-pro.fr/t28-renouvellement-adhesion-amarid">Renouvellement d'adhésion</span></a>
  <li><a href="http://amarid.forum-pro.fr/t77-votre-nomenclature-de-classeur#79">Nomenclature du classeur</span></a>
    <li class='has-sub'><a href="http://amarid.forum-pro.fr/f7-documents-administratifs" class="fly">Documents administratifs</a>
            <ul>
            <li class='has-sub'><a href="http://amarid.forum-pro.fr/f8-contrat-de-travail" >Contrat de travail</a>
            <ul>
              <li><a href="http://amarid.forum-pro.fr/t1-contrat-de-travail">Contrat de travail PDF</a></li>
                <li class='last'><a href="http://amarid.forum-pro.fr/f8-contrat-de-travail">Posez vos questions sur ce sujet</a></li>
          </ul>
    </li>
 <li class='has-sub'><a href="http://amarid.forum-pro.fr/f9-avenant-et-annexe-1-au-contrat-de-travail">Avenant et annexe 1 au contrat de travail</a>
            <ul>
              <li><a href="http://amarid.forum-pro.fr/t78-annexe-nouveau-calcul-mensualisation-fichier-pdf#80">Mensualisation fichier PDF</a></li>
              <li><a href="http://amarid.forum-pro.fr/t79-annexe-nouveau-calcul-mensualisation-fichier-xls-ou-open-office#81">Mensualisation fichier Excel ou open office</a></li>
              <li><a href="http://amarid.forum-pro.fr/t80-avenant-contrat-de-travail#82">Avenant au contrat de travail PDF</a></li>
              <li class='last'><a href="http://amarid.forum-pro.fr/f9-avenant-et-annexe-1-au-contrat-de-travail">Posez vos questions sur ce sujet</a></li>
            </ul>
    </li>       
         <li class='has-sub'><a href="http://amarid.forum-pro.fr/f19-fiche-de-presence">Fiche de présence</a>
            <ul>
              <li><a href="http://amarid.forum-pro.fr/t81-fiche-de-presence">Fiche de présence PDF</a></li>
              <li class='last'><a href="http://amarid.forum-pro.fr/f19-fiche-de-presence">Posez vos questions sur ce sujet</a></li>
            </ul>
        </li>         
    <li class='has-sub'><a href="http://amarid.forum-pro.fr/f20-engagement-reciproque">Engagement réciproque</a>
            <ul>
              <li><a href="http://amarid.forum-pro.fr/t82-engagement-reciproque">Engagement réciproque PDF</a></li>
              <li class='last'><a href="http://amarid.forum-pro.fr/f20-engagement-reciproque">Posez vos questions sur ce sujet</a></li>
          </ul>
  </li>

    <li class='has-sub'><a href="http://amarid.forum-pro.fr/f21-fiche-absence-exceptionnelle">Fiche de congé exceptionnel</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t83-fiche-de-conge-exceptionel#85">Fiche de congé exceptionnel PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f21-fiche-absence-exceptionnelle">Posez vos questions sur ce sujet</a></li>
        </ul>
    </li>

    <li class='has-sub'><a href="http://amarid.forum-pro.fr/f22-fiche-conges-payes">Fiche de congés payés</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t84-fiche-de-conges-payes#86">Fiche congé payé PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f22-fiche-conges-payes">Posez vos questions sur ce sujet</a></li>
        </ul>
    </li>
 
    <li class='has-sub'><a href="http://amarid.forum-pro.fr/f23-attestation-impot">Attestation d'impôt</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t4-attestation-impot">Attestation d'impôt PDF</a></li>
          <li class='last'><a href="http://amarid.forum-pro.fr/f23-attestation-impot">Posez vos questions sur ce sujet</a></li>
        </ul>
    </li>

    <li class='has-sub'><a href="http://amarid.forum-pro.fr/f25-autorisations-parentales">Autorisations parentales</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t85-autorisations-parentales#87">Autorisations parentales PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f25-autorisations-parentales">Posez vos questions sur ce sujet</a></li>
        </ul>
    </li>

  <li class='has-sub'><a href="http://amarid.forum-pro.fr/f26-solde-de-tout-compte">Solde de tout compte</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t86-solde-de-tout-compte">Solde de tout compte PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f26-solde-de-tout-compte">Posez vos questions sur ce sujet</a></li>
        </ul>
  </li>

  <li class='has-sub'><a href="http://amarid.forum-pro.fr/f27-certificat-de-travail">Certificat de travail</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t87-certificat-de-travail#89">Certificat de travail PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f27-certificat-de-travail">Posez vos questions sur ce sujet</a></li>
        </ul>
  </li>

  <li class='has-sub'><a href="http://amarid.forum-pro.fr/f28-fiche-de-liaison">Fiche de liaison</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t88-la-fiche-de-liaison#90">Fiche de liaison PDF</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f28-fiche-de-liaison">Posez vos questions sur ce sujet</a></li>
        </ul>
  </li>

  <li class='has-sub'><a href="http://amarid.forum-pro.fr/f30-indemnites-de-ruptures-1-5-ou-1-120">Indemnités de rupture</a>
        <ul>
            <li><a href="http://amarid.forum-pro.fr/t89-calcul-prime-de-fin-de-contrat-format-pdf#91">Calcul fin de contrat PDF</a></li>
            <li><a href="http://amarid.forum-pro.fr/t90-calcul-prime-de-fin-de-contrat-format-excel-open-office">Calcul fin de contrat  format excel et open office</a></li>
              <li class='last'><a href="http://amarid.forum-pro.fr/f30-indemnites-de-ruptures-1-5-ou-1-120">Posez vos questions sur ce sujet</a></li>
        </ul>
  </li>
   
    </li>
</ul>

<li class='has-sub'><a href="/f35-Salaire.htm">Salaire</a>
        <ul>
          <li class='has-sub'><a href="/f60-Bullelin-de-salaire.htm">Bulletin de salaire 2015</a>
        <ul>
          <li><a href="/t980-SALAIRE-Bulletin-de-salaire-2015-avec-calcul-nouveau-mod-le.htm">B.salaire Nouveau modele Excel & open office</a></li>
            <li><a href="/t981-SALAIRE-Bulletin-de-salaire-2015-format-PDF-nouveau-mod-le.htm">B.salaire Nouveau modele format PDF</a></li>
            <li><a href="t122-bulletin-de-salaire-01-janvier-2010-avec-calcul-sans-les-heures-travaillees.htm">B.salaire Ancien modele Excel & open office</a></li>
            <li><a href="/t121-bulletin-de-salaire-01-janvier-2010-sans-calcul-sans-calcul-des-heures.htm">B.salaire Ancien modele format PDF</a></li>
            <li class='last'><a href="/f60-Bullelin-de-salaire.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
 </li>
     
 <li class='has-sub'><a href="/f54-Remuneration.htm">Systeme de rémunération</a>
        <ul>
            <li><a href="/t91-Systeme-de-remuneration.htm">Systeme de rémunération PDF</a></li>
            <li class='last'><a href="/f54-Remuneration.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

  <li class='has-sub'><a href="/f55-Indemnites-entretien.htm">Indemnités d'entretien</a>
        <ul>
          <li><a href="/t95-indemnites-entretien.htm">Indemnités d'entretien PDF</a></li>
          <li class='last'><a href="/f55-Indemnites-entretien.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

 <li class='has-sub'><a href="/f65-Tableau-annuel-recapitulatif-des-salaires-et-indemnites-d-entretien.htm">Tableau annuel récapitulatif</a>
        <ul>
          <li><a href="/t96-Tableau-annuel-recapitulatif-des-salaires-et-indemnites-d-entretien.htm">Tableau format Excel & open office</a></li>
          <li class='last'><a href="/f65-Tableau-annuel-recapitulatif-des-salaires-et-indemnites-d-entretien.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>
      </ul>
      </li>

<li class='has-sub'><a href="/f161-Impots.htm">Impôt</a>
        <ul>
            <li class='has-sub'><a href="/f161-Impots.htm">Tableau calcul montant annuel a déclarer</a>
        <ul>
            <li><a href="/t607-Tableau-Aide-au-calcul-du-montant-a-declarer.htm">Tableau au format Excel & open office</a></li>
            <li><a href="/t1015-DOCUMENT-Tableau-Aide-au-calcul-du-montant-d-clarer-format-pdf.htm">Tableau au format PDF</a></li>
            <li class='last'><a href="/f161-Impots.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>
<li class='has-sub'><a href="/f161-Impots.htm" >Attestation éval. des repas & indemnités km</a>
        <ul>
          <li><a href="/t1016-IMPOT-Attestation-des-repas.htm">Attestation évaluation  montant des repas PDF</a></li>
          <li><a href="/t997-IMPOT-Indemnit-s-frais-Km-2015.htm">Barème automobile 2015</a></li>
          <li class='last'><a href="/f161-Impots.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>
</ul>
</li>

<li class='has-sub'><a href="/f192-Compte-rendu-des-r-unions.htm">Comptes-rendu des réunions de formation</a>
        <ul>
            <li class='has-sub'><a href="/t742-Mort-Subite-du-nourrisson.htm">Mort subite du nourrisson</a>
        <ul>
          <li><a href="/t742-Mort-Subite-du-nourrisson.htm">Mort subite du nourrisson PDF et lecture directe</a></li>
          <li class='last'><a href="/f192-Compte-rendu-des-r-unions.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>
 <li class='has-sub'><a href="/t741-Compte-rendu.htm">Morsure & agréssivité enfant de 0 a 3 Ans</a>
        <ul>
            <li><a href="/t741-Compte-rendu.htm">Enfant de 0 a 3 Ans PDF et lecture directe</a></li>
            <li class='last'><a href="/f192-Compte-rendu-des-r-unions.htm">Posez vos questions sur ce sujet</a></li>
      </ul>
      </li>
  </ul>
  </li>


</ul>
 <li class='has-sub'><a href="{U_INDEX}">Catégories</span></a>
    <ul>

      <li class='has-sub'><a href="http://amarid.forum-pro.fr/f6-amarid?tt=1">Accueil</a>
        <ul>
          <li><a href="/f27-Qui-sommes-nous.htm">AMARID</a></li>
          <li><a href="https://mapsengine.google.com/map/edit?mid=zO-uUHlzuHeA.keqQe1fGPUno"  TARGET="_blank">Ou nous trouver (carte de france)</a></li>
          <li><a href="http://amarid.forum-pro.fr/f51-places-disponibles?tt=1">Assistante maternelle vos places disponibles</a></li>
          <li><a href="http://amarid.forum-pro.fr/f52-recherche-assistantes-maternelles?tt=1">Parents recherchez une assistante maternelle</a></li>
          <li class='last'><a href="http://amarid.forum-pro.fr/f53-sante-de-l-enfant-produits-defectueux-trouvailles"> Santé de l'enfant, Produits défectueux</a></li>
        </ul>
        </li>
      <li><a href="http://amarid.forum-pro.fr/f49-bulletin-d-adhesion-amarid-ou-renouvellement">Bulletin d'adhésion et renouvellement AMARID</a></li>
      <li class='has-sub'><a href="/f3-Assistante-Maternelle.htm">Posez vos questions</a>
          <ul>
            <li><a href="http://amarid.forum-pro.fr/f4-adherentes-posez-vos-questions">Adhérentes posez vos questions</a></li>
            <li><a href="http://amarid.forum-pro.fr/f15-assmats-non-adherentes-posez-vos-questions">Assmats non adhérentes posez vos questions</a></li>
            <li><a href="http://amarid.forum-pro.fr/f16-parents-posez-vos-questions">Parents posez vos questions</a></li>
            <li class='last'><a href="http://amarid.forum-pro.fr/f17-vos-suggestions-vos-demandes">Vos suggestions vos demandes</a></li>
        </ul>
        </li>
      <li><a href="http://amarid.forum-pro.fr/f62-agenda-amarid">Agenda AMARID</a></li>
      <li class='has-sub'><a href="http://amarid.forum-pro.fr/c9-maisons-d-assistantes-maternelles-mam?tt=1">Maison d'assistant(e)s Maternel(le)s MAM</a>
          <ul>
          <li><a href="http://amarid.forum-pro.fr/f64-textes-lois?tt=1">Textes et lois</a></li>
          <li><a href="http://amarid.forum-pro.fr/f65-m-a-m-laissez-vos-cordonnees?tt=1">Laissez vos coordonnées</a></li>
          <li class='last'><a href="http://amarid.forum-pro.fr/f66-vos-experiences-interrogations?tt=1">Vos experiences & interrogations</a></li>
          </ul>
          </li>
      <li class='has-sub'><a href="http://amarid.forum-pro.fr/c5-detente?tt=1">Détente (cuisine, travaux manuels, etc...)</a>
          <ul>
          <li><a href="http://amarid.forum-pro.fr/f5-coin-cuisine?tt=1">Vos recettes pour vos petits</a></li>
          <li class='last'><a href="http://amarid.forum-pro.fr/f72-activites-manuelles?tt=1">Activitées manuelles pour vos petits</a></li>
          </ul>
          </li>
  </ul>
  </li>

  <li class='has-sub'><a href="{U_INDEX}">Contacts</span></a>
  <ul>
  <li><a href="http://amarid.fr/index.php/amarid-contact/12-contacts/5-association-amarid" TARGET="_blank">Contact AMARID</span></a>
  <li><a href="http://amarid.fr/index.php/amarid-contact/12-contacts/3-amarid-secretariat" TARGET="_blank"><span>Secretariat AMARID</span></a> 
  <li class='last'><a href="http://amarid.fr/index.php/amarid-contact/12-contacts/1-administrateur" TARGET="_blank">Contact Administrateur Site & Forum</span></a>
</li>
</ul>
 
 <li><a href="http://amarid.fr/"target="_blank" ><span>Site internet</span></a></li>
   
   
<li class='has-sub'><a href="{U_INDEX}">Outils</span></a>
  <ul>
  <li><a href="{U_PROFILE}"><span>Profil</span></a> 
  <li><a href="https://translate.google.com/" TARGET="_blank">Google traducteur</span></a>
  <li><a href="http://www.gimp.org/" TARGET="_blank">Gimp outil graphique gratuit</span></a>
  <li class='last'><a href="http://www.openoffice.org/fr/Telecharger/" TARGET="_blank">Open office</span></a>
</li>
</ul>
</ul>
</div>
</div>

</td>
</tr>
</table> 
           
<!-- Fin du menu -->
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>   
                             
         
   <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
                     
            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->
   
                          <br />
 
 
 
    <center>
            <style type="text/css">#rotator1433279344582 {height:330px;} #rotator1433279344582 a{position:absolute;background:#FFFFFF;border:1px solid #CCCCCC;padding:4px;} #rotator1433279344582 img { height:320px;width:640px; }</style>
          <div  id="rotator1433279344582"><a id="itemActif1433279344582"style="z-index:999" href="http://forum.forumactif.com/h11-formulaire-diaporama#" title="" ><img src="http://i18.servimg.com/u/f18/19/23/09/94/presen11.jpg" alt="" /></a>
            <a  href="http://forum.forumactif.com/h11-formulaire-diaporama#" title="" ><img src="http://i18.servimg.com/u/f18/19/23/09/94/doc_le10.png" alt="" /></a>
            <a  href="http://forum.forumactif.com/h11-formulaire-diaporama#" title="" ><img src="http://i18.servimg.com/u/f18/19/23/09/94/animat10.jpg" alt="" /></a>
            <a  href="http://forum.forumactif.com/h11-formulaire-diaporama#" title="" ><img src="http://i18.servimg.com/u/f18/19/23/09/94/autre_10.png" alt="" /></a>
            <a  href="http://forum.forumactif.com/h11-formulaire-diaporama#" title=""><img src="http://i18.servimg.com/u/f18/19/23/09/94/benevo10.png" alt="" /></a>
            <a  href="http://forum.forumactif.com/h11-formulaire-diaporama#" title="" ><img src="http://i18.servimg.com/u/f18/19/23/09/94/route10.png" alt="" /></a>
          </div><script type="text/javascript">(function(){var r = document.getElementById("rotator1433279344582"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() {var a = document.getElementById("itemActif1433279344582"), n = jQuery(a).next()[0] || l[0]; if (!a) return window.clearInterval(rotate); n.style.opacity = 1;n.style.zIndex = 998;jQuery(a).animate({"opacity":0},800,"linear",function() {a.id = "";a.style.zIndex = "";n.id = "itemActif1433279344582";n.style.zIndex = 999})},5500)})();</script>
 
 
         
   
                          <br />
              <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->

[Self]

Rien ne cloche, essayons une autre approche, remplacez le code Javascript que je vous ai donné par celui-ci alors :

Code:

jQuery(function($){ $('#fa_left').after($('#cssmenu').clone()); $('.forumline_1').remove() });

[amarid]

bonsoir
la j'ai plus rien ni le menu ni dans la toolbar (j'ai remis le premier code en attendant)

[Self]

J'ai oublié quelques choses, on va essayer comme ceci :

Code:

$(function(){$(function(){ $('#fa_left').after($('#cssmenu').clone()); $('.forumline_1').remove(); })});

[amarid]

bonsoir mieux le seul souci c'est quand l'avatar ce met en place a coté du nom du membre cela me donne cela



et les fleches de pour indiqué des menu déroulant sont un peut hautes (mais cela est un detail pour les fleches) en mode non connecter cela donne ceci

[Self]

Changez votre CSS par ceci :

Code:

/*====================== fond ==========================*/
#containez {background-color:#01B0F0;background-color:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background-color:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;margin:auto;padding:auto;
width:100%;/*box-shadow:0 6px 30px rgba(0,0,0,0.4);*/  line-height: 1;display: block;font-family: 'PT Sans', sans-serif;border-radius:10px;z-index:200;}

/*====================== menu =========================*/
#cssmenu {background-color:#01B0F0;background-color:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background-color:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background-color:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;z-index:200;
margin:auto;padding:auto;width:82%;margin-left:auto;margin-right:auto;line-height: 1;display: inline-block;font-family: 'PT Sans', sans-serif;border-radius:10px;}


#cssmenu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: block;
   width: auto;
}
#cssmenu ul:after,
#cssmenu:after {
   content: " ";
   display: block;
   font-size: 0;
   height: 0;
   clear: both;
   visibility: hidden;
}
#cssmenu ul li {
   margin: 0;
   padding: 0;
   display: block;
   position: relative;
}
#cssmenu ul li a {
   text-decoration: none;
   display: block;
   margin: 0;
   -webkit-transition: color .2s ease;
   -moz-transition: color .2s ease;
   -ms-transition: color .2s ease;
   -o-transition: color .2s ease;
   transition: color .2s ease;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
#cssmenu li a{ color: #000 !important; }
#fa_left, #fa_left a{ vertical-align: top !important; }
#cssmenu ul li ul {
   position: absolute;
   left: -9999px;
   top: auto;
}

/*=========================== sous-menus =========================*/
#cssmenu ul li ul li {
   max-height: 0;
   position: absolute;
   -webkit-transition: max-height 0.4s ease-out;
   -moz-transition: max-height 0.4s ease-out;
   -ms-transition: max-height 0.4s ease-out;
   -o-transition: max-height 0.4s ease-out;
   transition: max-height 0.4s ease-out;
   background: #ffffff;
   width: 300px;
   border-right: solid 2px red;
z-index:0;
}
#cssmenu ul li ul li.has-sub:after {
   display: block;
   position: absolute;
   content: "";
   height: 10px;
   width: 10px;
   border-radius: 5px;
   background: #000000;
   z-index: 0;
   top: 13px;
   right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
   right: auto;
   left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
   display: block;
   position: absolute;
   content: "";
   height: 0;
   width: 0;
   border: 3px solid transparent;
   border-left-color: #ffffff;
   z-index: 1;
   top: 15px;
   right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
   right: auto;
   left: 15px;
   border-left-color: transparent;
   border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
   font-size: 14px;
   font-weight: 400;
   text-transform: none;
   color: #000000;
   letter-spacing: 0;
   display: block;
   width: 350px;
   padding: 7px 7px 7px 7px;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
   color: red !important;
   /*font-weight:bold;*/
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
   background: #4cb6ea;
}
/*=================================== menu droit ================================*/
#cssmenu ul li ul li:hover > ul {
   left: 100%;
   top: 0;
}
/*=================================== menu droit ================================*/
#cssmenu ul li ul li:hover > ul > li {
   max-height: 72px;
   position: relative;
}
#cssmenu > ul > li {
   float: left;
}
#cssmenu.align-center > ul > li {
   float: none;
   display: inline-block;
}
#cssmenu.align-center > ul {
   text-align: center;
   font-size: 0;
}
#cssmenu.align-center ul ul {
   text-align: left;
}
#cssmenu.align-right > ul {
   float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
   left: auto;
   right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
   right: 100%;
   left: auto;
}
#cssmenu.align-right ul ul li a {
   text-align: right;
}

/*========================================== onglets ==========================================*/
#cssmenu > ul > li:after {
   Border-radius:5px 5px 0 0;
   content: "";
   display: block;
   position: absolute;
   width: 100%;
   height: 0;
   top: 0;
   z-index: 1;
   background:white;
   -webkit-transition: height .2s;
   -moz-transition: height .2s;
   -ms-transition: height .2s;
   -o-transition: height .2s;
   transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
   padding-right: 40px;

}
#cssmenu > ul > li.has-sub > a:after {
   display: block;
   content: "";
   background: #000000;
   height: 12px;
   width: 12px;
   position: absolute;
   border-radius: 13px;
   right: 14px;
   top: 21px;
}

#cssmenu > ul > li.has-sub > a:before {
   display: block;
   content: "";
   border: 4px solid transparent;
   border-top-color: #4cb6ea;
   z-index: 2;
   height: 0;
   width: 0;
   position: absolute;
   right: 16px;
   top: 26px;
}

#cssmenu > ul > li > a {
   color: #000000;
   padding: 23px 20px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   font-size: 12px;
   z-index: 2;
   position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
   height: 100%;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
   color: #000000;
}
#cssmenu > ul > li.active > a {
   color: #000000;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
   background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
   border-top-color: #000000;
}
#cssmenu > ul > li:hover > ul {
   left: 0;
}
#cssmenu > ul > li:hover > ul > li {
   max-height: 72px;
   position: relative;
}
#cssmenu #menu-button {
   display: none;
}
#cssmenu > ul > li > a {
   display: block;
}

#cssmenu > ul > li {
   width:auto;
}
#cssmenu > ul > li > ul {
   width: 170px;
   display: block;
}
/*============================================ menu drop mobile ====================================*/
#cssmenu > ul > li > ul > li {
   width: 370px;
   display: block;
} /** 800 - 1024 - 192 dpi**/
@media all and (max-width: 600px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 500px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 500px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 500px), only screen and (min-device-pixel-ratio: 2) and (max-width: 500px), only screen and (min-resolution: 96dpi) and (max-width: 500px), only screen and (min-resolution: 2dppx) and (max-width: 500px) {
   #cssmenu > ul {
      max-height: 0;
      overflow: hidden;
      -webkit-transition: max-height 0.25s ease-out;
      -moz-transition: max-height 0.25s ease-out;
      -ms-transition: max-height 0.25s ease-out;
      -o-transition: max-height 0.25s ease-out;
      transition: max-height 0.25s ease-out;
   }
   #cssmenu > ul > li > ul {
      width: 100%;
      display: block;
   }
   #cssmenu.align-right ul li a {
      text-align: left;
   }
   #cssmenu > ul > li > ul > li {
      width: 100%;
      display: block;
   }
   #cssmenu.align-right ul ul li a {
      text-align: left;
   }
   #cssmenu > ul > li > ul > li > a {
      width: 100%;
      display: block;
   }
   #cssmenu ul li ul li a {
      width: 100%;
   }
   #cssmenu.align-center > ul {
      text-align: left;
   }
   #cssmenu.align-center > ul > li {
      display: block;
   }
   #cssmenu > ul.open {
      max-height: 1000px;
      border-top: 1px solid rgba(110, 110, 110, 0.25);
   }
   #cssmenu ul {
      width: 100%;
   }
   #cssmenu ul > li {
      float: none;
      width: 100%;
   }
   #cssmenu ul li a {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      padding: 12px 20px;

   }
   #cssmenu ul > li:after {
      display: none;
   }
   #cssmenu ul li.has-sub > a:after,
   #cssmenu ul li.has-sub > a:before,
   #cssmenu ul li ul li.has-sub:after,
   #cssmenu ul li ul li.has-sub:before {
      display: none;
   }
   #cssmenu ul li ul,
   #cssmenu ul li ul li ul,
   #cssmenu ul li ul li:hover > ul,
   #cssmenu.align-right ul li ul,
   #cssmenu.align-right ul li ul li ul,
   #cssmenu.align-right ul li ul li:hover > ul {
      left: 0;
      position: relative;
      right: auto;
   }
   #cssmenu ul li ul li,
   #cssmenu ul li:hover > ul > li {
      max-height: 999px;
      position: relative;
      background: none;
   }
   #cssmenu ul li ul li a {
      padding: 8px 20px 8px 35px;
      color: #ffffff;
   }
   #cssmenu ul li ul ul li a {
      padding: 8px 20px 8px 50px;
   }
   #cssmenu ul li ul li:hover > a {
      color: #000000;
   }
   #cssmenu #menu-button {
      display: block;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      padding: 15px 20px;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 1px;
      color: #ffffff;
      cursor: pointer;
   }
   #cssmenu #menu-button:after {
      display: block;
      content: '';
      position: absolute;
      height: 3px;
      width: 22px;
      border-top: 2px solid #ffffff;
      border-bottom: 2px solid #ffffff;
      right: 20px;
      top: 16px;
   }
   #cssmenu #menu-button:before {
      display: block;
      content: '';
      position: absolute;
      height: 3px;
      width: 22px;
      border-top: 2px solid #ffffff;
      right: 20px;
      top: 26px;
   }
}

[amarid]

Nikel
merci pour aide peut etre cela servira à d'autres
quel rapidité cela me change

je passe en résolu