"Test"
Bootstrap 3.3.0 Snippet by ChypRi0tE

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="primary-links"> <ul class="frutiger55 clearfix"> <li class="a397" name="397"> <a href="http://ltl.dev/fr/agenda">Agenda</a> <ul class="dropdown" style="display: none;" name="397"> <li class="a549"><a href="http://ltl.dev/fr/agenda">En ce moment et à venir</a></li> <li class="a1680 no-border"><a href="http://ltl.dev/fr/agenda/archives">Archives</a></li> </ul> </li> <li class="a878" name="878"> <a href="http://ltl.dev/fr/les-talens-lyriques">Les Talens Lyriques</a> <ul class="dropdown" style="display: none;" name="878"> <li class="a1548"><a href="http://ltl.dev/fr/les-talens-lyriques/christophe-rousset">Qui sommes-nous ?</a></li> <li class="a1549"><a href="http://ltl.dev/fr/les-talens-lyriques/les-talens-lyriques-en-images/presentation-de-lensemble">Les Talens Lyriques en images</a></li> <li class="a1573"><a href="http://ltl.dev/fr/les-talens-lyriques/contact">Contact</a></li> <li class="a1702 no-border"><a href="http://ltl.dev/fr/les-talens-lyriques/revue-de-presse">Presse</a></li> </ul> </li> <li class="a1483" name="1483"> <a href="http://ltl.dev/fr/actions-culturelles">Actions culturelles</a> <ul class="dropdown" style="display: none;" name="1483"> <li class="a1551"><a href="http://ltl.dev/fr/actions-culturelles/residences-educatives/november-2011-au-college-mayer-paris-18e">Résidences éducatives</a></li> <li class="a1511"><a href="http://ltl.dev/fr/actions-culturelles/ateliers-pedagogiques">Ateliers pédagogiques</a></li> <li class="a1552"><a href="http://ltl.dev/fr/actions-culturelles/pratique-musicale">Pratique musicale</a></li> <li class="a1553 no-border"><a href="http://ltl.dev/fr/actions-culturelles/hors-les-murs">Hors les murs</a></li> </ul> </li> <li class="a1484" name="1484"> <a href="http://ltl.dev/fr/partenaires">Partenaires</a> <ul class="dropdown" style="display: none;" name="1484"> <li class="a1564"><a href="http://ltl.dev/fr/partenaires/nos-partenaires/nos-partenaires-institutionnels">Nos partenaires</a></li> <li class="a1568"><a href="http://ltl.dev/fr/partenaires/nous-rejoindre">Nous rejoindre</a></li> <li class="a1571"><a href="http://ltl.dev/fr/partenaires/temoignages">Témoignages</a></li> <li class="a1572 no-border"><a href="http://ltl.dev/fr/partenaires/les-soirees-du-cercle-des-mecenes">Les soirées du Cercle des Mécènes</a></li> </ul> </li> <li class="a402" name="402"> <a href="http://ltl.dev/fr/discographie">Discographie</a> </li> <li class="a403" name="403"> <a href="http://ltl.dev/fr/ressources">Ressources</a> <ul class="dropdown" style="display: none;" name="403"> <li class="a559"><a href="http://ltl.dev/fr/ressources">Documentation</a></li> <li class="a548"><a href="http://ltl.dev/fr/dossiers">Photos de presse</a></li> <li class="a1709 no-border"><a href="http://ltl.dev/fr/ressources/archives">Archives</a></li> </ul> </li> </ul> </div>
#primary-links{background: #e4e4e4;} #primary-links ul{list-style:none; margin:0;padding:0;} #primary-links ul li{display:inline-block; margin:0;position:relative;} #primary-links ul li.talens-lyrics a{color:#0847CA;} #primary-links ul li.agenda a{color:#F13901;} #primary-links ul li.actions a{color:#39B4E2;} #primary-links ul li.partenaires a{color:#6C13A4;} #primary-links ul li.discographie a{color:#FADA0A;} #primary-links ul li.resources a{color:#EADED4;} #primary-links > ul > li > a {text-transform:uppercase; color:#080808; text-decoration:none;font-size:15px;display:inline-block;padding:17.5px 35.5px;} #primary-links > ul > li:not(:last-child) > a {border-right: 1px solid #c0c0c0;} #primary-links > ul > li:first-child > a {color: #fff;padding: 18px 30px;background:#333335} #primary-links > ul > li:first-child > ul.dropdown {width:160%;} #primary-links ul li ul.dropdown {margin:0;padding:0;position:absolute;background:#e4e4e4;width:100%;} #primary-links ul li ul.dropdown li {margin:0 15px;padding:0;display:block;border-bottom:1px solid #7c7676;} #primary-links ul li ul.dropdown li.active a {font-weight:bold;} #primary-links ul li ul.dropdown li.no-border {border:none} #primary-links ul li ul.dropdown li a {color:#7c7676;font-size:14px;text-transform:none;font-family:'Open Sans';text-decoration:none;padding:15px 0;display:block;} #primary-links .frutiger55 .a878 a:hover, #primary-links .frutiger55 .a878 a.active{color: #0847CA;} #primary-links .frutiger55 .a397 a:hover, #primary-links .frutiger55 .a397 a.active{color: #F13901;} #primary-links .frutiger55 .a1483 a:hover, #primary-links .frutiger55 .a1483 a.active{color: #39B4E2;} #primary-links .frutiger55 .a1484 a:hover, #primary-links .frutiger55 .a1484 a.active{color: #6C13A4;} #primary-links .frutiger55 .a402 a:hover, #primary-links .frutiger55 .a402 a.active{color: #FADA0A;} #primary-links .frutiger55 .a403 a:hover, #primary-links .frutiger55 .a403 a.active{color: #FFFFFF;} #primary-links .frutiger55 .a1528 a:hover, #primary-links .frutiger55 .a1528 a.active{color: #0847CA;} #primary-links .frutiger55 .a644 a:hover, #primary-links .frutiger55 .a644 a.active{color: #F13901;} #primary-links .frutiger55 .a1534 a:hover, #primary-links .frutiger55 .a1534 a.active{color: #39B4E2;} #primary-links .frutiger55 .a1547 a:hover, #primary-links .frutiger55 .a1547 a.active{color: #6C13A4;} #primary-links .frutiger55 .a656 a:hover, #primary-links .frutiger55 .a656 a.active{color: #FADA0A;} #primary-links .frutiger55 .a657 a:hover, #primary-links .frutiger55 .a657 a.active{color: #EADED4;} #primary-links .frutiger55 .dropdown a.active{font-weight:bold;} #primary-links ul.frutiger55 > li > a:hover{margin-bottom: -2px;} #primary-links ul.frutiger55 .a878 > a:hover{border-bottom: 2px solid transparent;} #primary-links ul.frutiger55 .a397 > a:hover{border-bottom: 2px solid transparent;} #primary-links ul.frutiger55 .a1483 > a:hover{border-bottom: 2px solid transparent;} #primary-links ul.frutiger55 .a1484 > a:hover{border-bottom: 2px solid transparent;} #primary-links ul.frutiger55 .a402 > a:hover{border-bottom: 2px solid transparent;} #primary-links ul.frutiger55 .a403 > a:hover{border-bottom: 2px solid transparent;} #primary-links ul.frutiger55 .a1528 > a:hover{border-bottom: 2px solid transparent;} #primary-links ul.frutiger55 .a644 > a:hover{border-bottom: 2px solid transparent;} #primary-links ul.frutiger55 .a1534 > a:hover{border-bottom: 2px solid transparent;} #primary-links ul.frutiger55 .a1547 > a:hover{border-bottom: 2px solid transparent;} #primary-links ul.frutiger55 .a656 > a:hover{border-bottom: 2px solid transparent;} #primary-links ul.frutiger55 .a657 > a:hover{border-bottom: 2px solid transparent;} #primary-links ul.frutiger55 .a878 > a.active{border-bottom: 2px solid #0847CA;} #primary-links ul.frutiger55 .a397 > a.active{border-bottom: 2px solid #F13901;} #primary-links ul.frutiger55 .a1483 > a.active{border-bottom: 2px solid #39B4E2;} #primary-links ul.frutiger55 .a1484 > a.active{border-bottom: 2px solid #6C13A4;} #primary-links ul.frutiger55 .a402 > a.active{border-bottom: 2px solid #FADA0A;} #primary-links ul.frutiger55 .a403 > a.active{border-bottom: 2px solid #FFFFFF;} #primary-links ul.frutiger55 .a1528 > a.active{border-bottom: 2px solid #0847CA;} #primary-links ul.frutiger55 .a644 > a.active{border-bottom: 2px solid #F13901;} #primary-links ul.frutiger55 .a1534 > a.active{border-bottom: 2px solid #39B4E2;} #primary-links ul.frutiger55 .a1547 > a.active{border-bottom: 2px solid #6C13A4;} #primary-links ul.frutiger55 .a656 > a.active{border-bottom: 2px solid #FADA0A;} #primary-links ul.frutiger55 .a657 > a.active{border-bottom: 2px solid #EADED4;} #primary-links ul.frutiger55 .a878 > ul.dropdown{border-top: 2px solid #0847CA;} #primary-links ul.frutiger55 .a397 > ul.dropdown{border-top: 2px solid #F13901;} #primary-links ul.frutiger55 .a1483 > ul.dropdown{border-top: 2px solid #39B4E2;} #primary-links ul.frutiger55 .a1484 > ul.dropdown{border-top: 2px solid #6C13A4;} #primary-links ul.frutiger55 .a402 > ul.dropdown{border-top: 2px solid #FADA0A;} #primary-links ul.frutiger55 .a403 > ul.dropdown{border-top: 2px solid #FFFFFF;} #primary-links ul.frutiger55 .a1528 > ul.dropdown{border-top: 2px solid #0847CA;} #primary-links ul.frutiger55 .a644 > ul.dropdown{border-top: 2px solid #F13901;} #primary-links ul.frutiger55 .a1534 > ul.dropdown{border-top: 2px solid #39B4E2;} #primary-links ul.frutiger55 .a1547 > ul.dropdown{border-top: 2px solid #6C13A4;} #primary-links ul.frutiger55 .a656 > ul.dropdown{border-top: 2px solid #FADA0A;} #primary-links ul.frutiger55 .a657 > ul.dropdown{border-top: 2px solid #EADED4;}
$('#primary-links ul li').mouseover(function(){ if(typeof(activatemenu) == 'number') {clearTimeout(activatemenu);} $('#primary-links .dropdown').hide(); $(this).children().next().show(); }).mouseout(function(){ if(typeof(activatemenu) == 'number') {clearTimeout(activatemenu);} activatemenu = setTimeout(showactivemenu, 2000); }); function showactivemenu() { $('#primary-links .dropdown').hide(); $('#primary-links .dropdown .active').parent().show(); }

Related: See More


Questions / Comments: