Barre de liens horizontale déroulante codes 7

obtenir ces boutons

Barre de liens horizontale
DÉROULANTE À QUATRE NIVEAUX :
CODE DES EXEMPLES 19 À 22

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

EXEMPLES ICI.

Ces codes sont différents car la barre de liens occupe TOUTE LA LARGEUR DE L’ÉCRAN et S'ADAPTE A LA RÉSOLUTION L’ÉCRAN.

La position du premier lien à gauche se règle par cette instruction (ou équivalente) : changer "80px".

.d70bl{padding-left:80px;

* * * * *
Le code pour obtenir la barre BLEUE (19° exemple) est le suivant :

<div class="d70bl">

<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="d70blfixe"><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 test test</a></li></ul></li>

<li><div class="d70blfixe"><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="d70blfixe"><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="d70blfixe"><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="d70blfixe"><a href="#">LIEN 5</a></div><ul>

<li><div class="d70blfixe"><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="d70blfixe"><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" style="border-right : 1px solid rgb(38,66,80);">CONTACT</a></li>

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

</div>

<style type="text/css">
.d70bl, .d70bl ul{position:relative;list-style: none;text-align: center;z-index:999;padding: 0;background:rgb(38,66,80) url('http://1.bp.blogspot.com/-yaeJ3oXQ2pc/TqVNe1XGfpI/AAAAAAAAA3M/-XMh8wD3WvM/s400/onglet%2Bfond%2Bbleu%2B3.PNG') repeat-x;border-bottom: 1px solid rgb(38,66,80);height:32px;}
.d70bl{padding-left:80px;margin-top:0px;}
.d70bl li{float: left;}
.d70bl li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.d70bl li:hover ul ul {left: -999em;}
.d70bl li:hover ul ul ul{left: -999em;}
.d70bl li:hover ul, .d70bl li li:hover ul,.d70bl li li li:hover ul{left: auto;min-height:1%;}

.d70bl li ul {margin-left:-28px;border-top: 1px solid rgb(38,66,80);width:144px;margin-top:-1px;}

.d70bl li ul a{border-right: 1px solid rgb(38,66,80);}

.d70bl li ul li a {width:125px;}
.d70bl li ul ul{margin: -34px 0 0 144px;min-height: 0;}

.d70bl a {color:white;
background:rgb(38,66,80) url('http://1.bp.blogspot.com/-yaeJ3oXQ2pc/TqVNe1XGfpI/AAAAAAAAA3M/-XMh8wD3WvM/s400/onglet%2Bfond%2Bbleu%2B3.PNG') no-repeat;border-bottom: 1px solid rgb(38,66,80);border-left: 1px solid rgb(38,66,80);padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;}

.d70bl a:hover{color:#191970;background:white;}

.d70blfixe a:hover {color:white;
background:rgb(38,66,80) url('http://1.bp.blogspot.com/-yaeJ3oXQ2pc/TqVNe1XGfpI/AAAAAAAAA3M/-XMh8wD3WvM/s400/onglet%2Bfond%2Bbleu%2B3.PNG') no-repeat;}
</style>
* * * * *
Pour obtenir le code permettant de réaliser la 20° barre de liens (rouge), le code nécessaire est le suivant :

<div class="d70ro">

<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="d70rofixe"><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 test test</a></li></ul></li>

<li><div class="d70rofixe"><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="d70rofixe"><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="d70rofixe"><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="d70rofixe"><a href="#">LIEN 5</a></div><ul>

<li><div class="d70rofixe"><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="d70rofixe"><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" style="border-right : 1px solid rgb(90,0,0);">CONTACT</a></li>

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

</div>

<style type="text/css">
.d70ro, .d70ro ul{position:relative;list-style: none;text-align: center;z-index:998;padding: 0;background:rgb(90,0,0) url('http://1.bp.blogspot.com/-LXIr9bIgAVU/TqVNn8_OWyI/AAAAAAAAA3Y/9r095VTWVKA/s400/onglet%2Bfond%2Brouge%2B3.PNG') repeat-x;border-bottom: 1px solid rgb(38,66,80);height:32px;}
.d70ro{padding-left:80px;margin-top:0px;}
.d70ro li{float: left;}
.d70ro li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.d70ro li:hover ul ul {left: -999em;}
.d70ro li:hover ul ul ul{left: -999em;}
.d70ro li:hover ul, .d70ro li li:hover ul,.d70ro li li li:hover ul{left: auto;min-height:1%;}

.d70ro li ul {margin-left:-28px;border-top: 1px solid rgb(90,0,0);width:144px;margin-top:-1px;}

.d70ro li ul a{border-right: 1px solid rgb(90,0,0);}

.d70ro li ul li a {width:125px;}
.d70ro li ul ul{margin: -34px 0 0 144px;min-height: 0;}

.d70ro a {color:white;
background:rgb(90,0,0) url('http://1.bp.blogspot.com/-LXIr9bIgAVU/TqVNn8_OWyI/AAAAAAAAA3Y/9r095VTWVKA/s400/onglet%2Bfond%2Brouge%2B3.PNG') no-repeat;border-bottom: 1px solid rgb(90,0,0);border-left: 1px solid rgb(90,0,0);padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;}

.d70ro a:hover{color:white;background:red;}

.d70rofixe a:hover {color:white;
background:rgb(90,0,0) url('http://1.bp.blogspot.com/-LXIr9bIgAVU/TqVNn8_OWyI/AAAAAAAAA3Y/9r095VTWVKA/s400/onglet%2Bfond%2Brouge%2B3.PNG') no-repeat;}
</style>
* * * * *
Pour obtenir le code permettant de réaliser la 21° barre de liens (verte), le code nécessaire est le suivant :

<div class="d70ve">

<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="d70vefixe"><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 test test</a></li></ul></li>

<li><div class="d70vefixe"><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="d70vefixe"><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="d70vefixe"><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="d70vefixe"><a href="#">LIEN 5</a></div><ul>

<li><div class="d70vefixe"><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="d70vefixe"><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" style="border-right : 1px solid rgb(78,95,71);">CONTACT</a></li>

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

</div>

<style type="text/css">
.d70ve, .d70ve ul{list-style: none;text-align: center;z-index:996;padding: 0;margin: 0;background:rgb(78,95,71) url('http://4.bp.blogspot.com/-fc95Tll9pnI/TqVNzqTuHtI/AAAAAAAAA3k/G_tKQjUdlS8/s400/onglet%2Bfond%2Bvert%2B3.PNG') repeat-x;border-bottom: 1px solid rgb(78,95,71);height:32px;}
.d70ve{padding-left:80px;margin-top:0px;}
.d70ve li{float: left;}
.d70ve li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.d70ve li:hover ul ul {left: -999em;}
.d70ve li:hover ul ul ul{left: -999em;}
.d70ve li:hover ul, .d70ve li li:hover ul,.d70ve li li li:hover ul{left: auto;min-height:1%;}

.d70ve li ul {margin-left:-28px;border-top: 1px solid rgb(78,95,71);width:144px;margin-top:-1px;}

.d70ve li ul a{border-right: 1px solid rgb(78,95,71);}

.d70ve li ul li a {width:125px;}
.d70ve li ul ul{margin: -34px 0 0 144px;min-height: 0;}

.d70ve a {color:white;
background:rgb(78,95,71) url('http://4.bp.blogspot.com/-fc95Tll9pnI/TqVNzqTuHtI/AAAAAAAAA3k/G_tKQjUdlS8/s400/onglet%2Bfond%2Bvert%2B3.PNG') no-repeat;border-bottom: 1px solid rgb(78,95,71);border-left: 1px solid rgb(78,95,71);padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;}

.d70ve a:hover{color:white;background:orange;}

.d70vefixe a:hover {color:white;
background:rgb(78,95,71) url('http://4.bp.blogspot.com/-fc95Tll9pnI/TqVNzqTuHtI/AAAAAAAAA3k/G_tKQjUdlS8/s400/onglet%2Bfond%2Bvert%2B3.PNG') no-repeat;}
</style>
* * * * *
Pour obtenir le code permettant de réaliser la 22° barre de liens (beige), le code nécessaire est le suivant :

<div class="d70be">

<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="d70befixe"><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 test test</a></li></ul></li>

<li><div class="d70befixe"><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="d70befixe"><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="d70befixe"><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="d70befixe"><a href="#">LIEN 5</a></div><ul>

<li><div class="d70befixe"><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="d70befixe"><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" style="border-right : 1px solid rgb(135,94,74);">CONTACT</a></li>

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

</div>

<style type="text/css">
.d70be, .d70be ul{list-style: none;text-align: center;z-index:995;padding: 0;margin: 0;background:rgb(135,94,74) url('http://3.bp.blogspot.com/-rCJEBEaB0yI/TqVN_oRZ7GI/AAAAAAAAA3w/7SsUbTbyLBM/s400/onglet%2Bfond%2Bbeige%2B3.PNG') repeat-x;border-bottom: 1px solid rgb(135,94,74);height:32px;}
.d70be{padding-left:80px;margin-top:0px;}
.d70be li{float: left;}
.d70be li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.d70be li:hover ul ul {left: -999em;}
.d70be li:hover ul ul ul{left: -999em;}
.d70be li:hover ul, .d70be li li:hover ul,.d70be li li li:hover ul{left: auto;min-height:1%;}

.d70be li ul {margin-left:-28px;border-top: 1px solid rgb(135,94,74);width:144px;margin-top:-1px;}

.d70be li ul a{border-right: 1px solid rgb(135,94,74);}

.d70be li ul li a {width:125px;}
.d70be li ul ul{margin: -34px 0 0 144px;min-height: 0;}

.d70be a {color:brown;
background:rgb(135,94,74) url('http://3.bp.blogspot.com/-rCJEBEaB0yI/TqVN_oRZ7GI/AAAAAAAAA3w/7SsUbTbyLBM/s400/onglet%2Bfond%2Bbeige%2B3.PNG') no-repeat;border-bottom: 1px solid rgb(135,94,74);border-left: 1px solid rgb(135,94,74);padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;}

.d70be a:hover{color:white;background:orange;}

.d70befixe a:hover {color:brown;
background:rgb(135,94,74) url('http://3.bp.blogspot.com/-rCJEBEaB0yI/TqVN_oRZ7GI/AAAAAAAAA3w/7SsUbTbyLBM/s400/onglet%2Bfond%2Bbeige%2B3.PNG') no-repeat;}
</style>

2 commentaires:

Mickael a dit…

Bonjour,

Quand je rentre le code et que j'observe le menu j'ai un petit problème.
Quand je passe la sourie sur le sous onglet 4.2, les sous sous onglet (4.2.1 et 4.2.2) s'affiche sur les sous onglet 4.3 et 4.4. Je voudrai qu'ils s'affichent à droite de 4.2 sans masquer 4.3 et 4.4
Mon blog : http://partoutcestchezmoi.blogspot.fr/

(je cherche des solutions sur internet du coup, je suis amené à souvent changer le menu, ils sera probablement pas comme je vous l'ai décrit si dessus quand vous y passerez).

Merci,

Jeremy a dit…

Hello,

Je viens de trouver la solution à mon précédent post : le menu n'est pas compatible avec le thème simple.

Encore merci pour le code.

Bonne continuation dans la rédaction de tes futurs articles.

Jeremy