[A20] Atelier 2 - faire fontionner 3ieme etage dropmenu

Bonjour tout le monde,
apres avoir fait quelque recherche. J'ai trouver que pour faire plusieur etage de menu, nous sommes obliger de faire notre propre .css file.

J'ai donc trouvé ce .css qui ma permis de le faire (les modifications pour que sa fonctionne avec le lien a Nicolas est deja fait)
Vous avez juste a copier le code ci-dessous sur un fichier .css . Modifier apres la premiere ligne dans votre html pour linker le .css. (Faire comme dans le labo 1) Vous avez a jouer avec la balise dropdown-submenu.

Code:

@import url(Mettre ici le lien de bootstrap que nicolas a mis sur la premiere ligne du HTML);

/* CSS used here will be applied after bootstrap.css */
HTML  CSS  Result
Edit on
.dropdown-submenu {
 position: relative;
}

.dropdown-submenu>.dropdown-menu {
 top: 0;
 left: 100%;
 margin-top: 25px;
 margin-left: -1px;
 -webkit-border-radius: 0 6px 6px 6px;
 -moz-border-radius: 0 6px 6px;
 border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
 display: block;
}

.dropdown-submenu>a:after {
 display: block;
 content: " ";
 float: right;
 width: 0;
 height: 0;
 border-color: transparent;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 border-left-color: #ccc;
 margin-top: 5px;
 margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
 border-left-color: #fff;
}

.dropdown-submenu.pull-left {
 float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
 left: -100%;
 margin-left: 10px;
 -webkit-border-radius: 6px 0 6px 6px;
 -moz-border-radius: 6px 0 6px 6px;
 border-radius: 6px 0 6px 6px;
}

[Jacob]