Les menus déroulants se configurent depuis le panneau d'administration :

Étape 1 : création de la boîte menu :

1. onglet STRUCTURE
2. BOÎTES MENUS DÉROULANTS

	Choisir le type de menu
	Indiquer le titre de la boîte

Étape 2 : création des options du menu :

1. onglet STRUCTURE
2. OPTIONS DE MENU DÉROULANT

Les options du menu vertical et du menu horizontal se configurent de la même manière
	Ce qui est toujours visible dans le menu horizontal ou vertical
	Le 2ème niveau d'une option, visible quand il est survolé
	Le 3ème niveau d'une option, quand un item est survolé
Menu horizontal	Menu vertical

Menu linéaire

Le menu linéaire peut contenir plusieurs options. Quand une option est survolée, une boîte s'affiche. Cette boîte est comme une boîte libre, dans laquelle on peut mettre tout ce qu'on veut :

• un menu
• du texte
• un tableau
• une image
• un diaporama
• une vidéo
• etc.

Les attributs généraux des menus déroulants sont dans ces lignes :

/******* Menus déroulants******/
ul.dropdown {
    font-weight: bold;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    float: left;
}
ul.dropdown li { /*niveau 1*/
    padding: 7px 10px;
    border: 1px solid #C0C0C0;
    background-color: #F78709;
    color: #FFF;
    list-style: none;
    margin: 0;
    float: left;
    line-height: 1.3em;
    vertical-align: middle;
}
ul.dropdown li:hover { /*niveau 1 survolé*/
    background-color: #0386BE;
    color: #FFF;
    position: relative;
    z-index: 599;
    cursor: pointer;
}
ul.dropdown a:link, ul.dropdown a:visited { /*lien et lien visité*/
    color: #FFF;
    text-decoration: none;
}
ul.dropdown a:hover { /*lien survolé*/
    color: #FFF;
}
ul.dropdown ul {
    width: 150px;
    margin-top: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
}
ul.dropdown ul li {
    font-weight: normal;
    float: none;
}
ul.dropdown ul ul {
    top: 1px;
    left: 99%;
}
ul.dropdown li *.dir {
    padding-right: 20px;
}
ul.dropdown-horizontal ul li *.dir { /*menu horizontal*/
    padding-right: 20px;
}
ul.dropdown li:hover > ul {
    visibility: visible;
}
ul.dropdown-vertical { /*menu vertical*/
    width: 160px;
}
ul.dropdown-vertical ul {
    top: 1px;
    left: 99%;
}
ul.dropdown-vertical li {
    float: none;
}
ul.dropdown-linear { /*menu linéaire*/
    width: 100%;
    font-size: 12px;
}
ul.dropdown-linear li {
    font: 12px Arial, Helvetica, sans-serif;
}
ul.dropdown-linear ul li {
    float: left;
    font: 10px Arial, Helvetica, sans-serif;
    background-color: #FFF;
    border: 1px solid #c0c0c0;
}
ul.dropdown-linear li:hover {
    position: static;
    background: #FFF;
}
ul.dropdown-linear ul li:hover {
    background-color: #FFF;
}
ul.dropdown-linear ul ul {
    display: none !important;
}
/*************/

Un menu horizontal est identifié par DDHxx (xx étant le numéro de la boîte).

Pour personnaliser votre menu horizontal, ajoutez les lignes suivantes à la fin du fichier style.css (n'oubliez pas de changer le numéro de la boîte !) :

/**** MENU DÉROULANT HORIZONTAL ****/

.DDH10 ul.dropdown-horizontal { /*ensemble du menu*/
    width: 400px;
}
.DDH10 ul.dropdown-horizontal li { /*niveau 1*/
    border: 1px solid #000;
    background: #c0c0c0;   /*gris*/
}
.DDH10 ul.dropdown-horizontal li:hover { /*niveau 1 survolé*/
    background-color: #abf713;   /*vert*/
    color: #000;
}
.DDH10 ul.dropdown-horizontal li:hover a { /*lien niveau 1 survolé*/
    color: #000;
}
.DDH10 ul.dropdown-horizontal li ul li { /*niveau 2*/
    margin-left: -1px;
    background: #fff;   /*blanc*/
    border: 1px solid #000;
    color: #000;
}
.DDH10 ul.dropdown-horizontal li ul li a { /*lien niveau 2*/
    color: #000;
}
.DDH10 ul.dropdown-horizontal li ul li:hover { /*niveau 2 survolé*/
    color: #000;
}
.DDH10 ul.dropdown-horizontal li ul li:hover a { /*lien niveau 2 survolé*/
    color: #000;
}
.DDH10 ul.dropdown-horizontal li ul li ul li { /*niveau 3*/
    margin-top: -2px;
    margin-left: 2px;
    width: 200px;
    background: #f7d413;  /*jaune*/
    color: #000;
}

/*************************************/

Il est possible de personnaliser une partie du menu, les classes sont :

li.L1	li.L2	Exemple, couleur du lien : .DDH10 ul.dropdown-horizontal li.L1-3 a {     color: #c00000; /*couleur rouge*/ }
li.L1-1
li.dir.L1-2	li.L1-2-1
li.L1-3

Un menu vertical est identifié par DDVxx (xx étant le numéro de la boîte).

Pour personnaliser votre menu vertical, copiez les lignes ci-dessous à la fin du fichier style.css (n'oubliez pas de changer le numéro de la boîte !) :

/**** MENU DEROULANT VERTICAL ****/

.DDV15 ul.dropdown-vertical { /*ensemble du menu*/
    width: 400px;
}
.DDV15 ul.dropdown-vertical li { /*niveau 1*/
    border: 1px solid #000;
    background: #c0c0c0;   /*gris*/
}
.DDV15 ul.dropdown-vertical li:hover { /*niveau 1 survolé*/
    background-color: #abf713;   /*vert*/
    color: #000;
}
.DDV15 ul.dropdown-vertical li:hover a { /*lien niveau 1 survolé*/
    color: #000;
}
.DDV15 ul.dropdown-vertical li ul li { /*niveau 2*/
    margin-left: -1px;
    background: #fff;   /*blanc*/
    border: 1px solid #000;
    color: #000;
}
.DDV15 ul.dropdown-vertical li ul li a { /*lien niveau 2*/
    color: #000;
}
.DDV15 ul.dropdown-vertical li ul li:hover { /*niveau 2 survolé*/
    color: #000;
}
.DDV15 ul.dropdown-vertical li ul li:hover a { /*lien niveau 2 survolé*/
    color: #000;
}
.DDV15 ul.dropdown-vertical li ul li ul li { /*niveau 3*/
    margin-top: -2px;
    margin-left: 2px;
    width: 200px;
    background: #f7d413;  /*jaune*/
    color: #000;
}
/***********************************/

Il est possible de personnaliser un item en particulier du menu, les classes sont :

li.L1	li.L1-1
li.L2	li.dir.L1-2	li.L1-2-1
	li.L1-3

Exemple, couleur du lien :

.DDV15 ul.dropdown-vertical li.L1-3 a {
    color: #c00000; /*couleur rouge*/
}

Un menu linéaire est identifié par DDLxx (xx étant le numéro de la boîte).

Pour personnaliser votre menu linéaire, copiez les lignes suivantes à la fin du fichier style.css (n'oubliez pas de modifier le numéro !) :

/**** MENU DEROULANT LINEAIRE ***/

.DDL413 ul.dropdown.dropdown-linear { /*largeur du menu*/
   width: 600px;
}
.DDL413 ul.dropdown.dropdown-linear li { /*titre du menu*/
    width: 130px;
    background: #961649;
    border: 0px;
    padding-left: 20px;
    color: #fff;
    border: 1px solid #701c3d;
}
.DDL413 ul.dropdown.dropdown-linear li ul li { /*contenu du menu*/
    background: url(img/cfs.png);
    width: 400px;
    color: #404040;
    border-radius: 0px;
    border: 1px solid #701c3d;
}
.DDL413 ul.dropdown.dropdown-linear li ul li a { /*lien dans le menu*/
    color: #961649;
}

/***********************************************/

Pour personnaliser une seule partie du menu linéaire, les classes sont :

Exemple, 3ème item du menu :

.DDL413 ul.dropdown-linear li.T2 {

    background: #ff3333; /*fond rouge*/
    color: #ffffff; /*couleur blanc*/
}