barre de liens horizontale déroulante codes 3

obtenir ces boutons

Barre de liens horizontale
DÉROULANTE A QUATRE NIVEAUX :
CODES DES EXEMPLES 7 A 9

Sur cette page, se trouvent les codes correspondant aux exemples 7 à 9 de barre de liens horizontale déroulante à 4 niveaux (explications : ici). EXEMPLES ICI.

* * * * *
Le code pour obtenir la barre de liens BLEUS qui constitue le 7° exemple figure ci-dessous.

Pour obtenir la barre de couleur rouge, il suffit, dans ce code, de remplacer "blue" 3x par "red".

Pour obtenir la barre de couleur verte, il suffit, dans ce code, de remplacer "blue" 3x par "green".

TOUTES LES AUTRES COULEURS SONT POSSIBLES. Il suffit de remplacer "blue" par n'importe quel code couleur.

<div class="d50bl">

<li><a href="#">ACCUEIL</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 2</a></li>

<li><div class="d50blfixe"><a href="#">LIEN 3</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.3</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.4</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.5</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.6</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.7</a></li></ul></li>

<li><div class="d50blfixe"><a href="#">LIEN 4</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.1</a></li>

<li><div class="d50blfixe"><a href="#">LIEN 4.2</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.2.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.2.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.2.3</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.3</a></li>

<li><div class="d50blfixe"><a href="#">LIEN 4.4</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.4.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.4.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.4.3</a></li></ul></li></ul></li>

<li><div class="d50blfixe"><a href="#">LIEN 5</a></div><ul>

<li><div class="d50blfixe"><a href="#">LIEN 5.1</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.1.1</a></li>

<li><div class="d50blfixe"><a href="#">LIEN 5.1.2</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">L. 5.1.2.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">L. 5.1.2.2</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.1.3</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.3</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.4</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.5</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.6</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.7</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 6</a></li>

<li><a href="http://radios-en-ligne.blogspot.com/" target="_blank">Radios</a></li>

<li><a href="http://televisions-en-ligne.blogspot.com/" target="_blank">Télévisions</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">CONTACT</a></li>

<a href="http://modifier-les-modeles-de-blogger.blogspot.com" style="display:none;">blogger</a>

</div>

<style type="text/css">
.d50bl, .d50bl ul{list-style: none;
text-align: center;z-index:999;padding: 0;margin: 0;}
.d50bl{width:925px;margin:0px auto;margin-top:0px;}
.d50bl li{float: left;}
.d50bl li ul{position: absolute;width: 125px;left: -999em;z-index:999;}

.d50bl li ul ul{margin: -32px 0 0 143px;min-height: 0;}
.d50bl li:hover ul ul {left: -999em;}
.d50bl li:hover ul ul ul{left: -999em;}
.d50bl li ul li a {width:125px;border:none;}

.d50bl li ul {width:143px;border: 1px solid blue;margin-left:-28px;}

.d50bl li:hover ul, .d50bl li li:hover ul,.d50bl li li li:hover ul{left: auto;min-height:1%;}

.d50bl a {color:black;background:#ddd;border-bottom: 5px solid blue;padding:7px 9px 6px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;}

.d50bl a:hover{color:white;background:blue;}

.d50blfixe a:hover {color:black;background:#ddd;}
</style>

<!--[if IE]><style type="text/css">.d50bl{width:929px;}</style><![endif]-->

Aucun commentaire: