barre de liens horizontale déroulante codes 5

obtenir ces boutons

Barre de liens horizontale
DÉROULANTE A QUATRE NIVEAUX :
CODES DES EXEMPLES 11 A 14

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

* * * * *
Le code pour obtenir la 11° barre de liens (bleue) est le suivant :

<div class="d30bl">

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

<li><div class="d30blfixe"><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="d30blfixe"><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">
.d30bl, .d30bl ul{list-style: none;text-align: center;z-index:999;padding: 0;margin: 0;}
.d30bl{width:925px;margin:0px auto;margin-top:0px;}
.d30bl li{float: left;}
.d30bl li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.d30bl li:hover ul ul {left: -999em;}
.d30bl li:hover ul ul ul{left: -999em;}
.d30bl li:hover ul, .d30bl li li:hover ul,.d30bl li li li:hover ul{left: auto;min-height:1%;}

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

.d30bl li a {
margin-right:4px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-goog-ms-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.d30bl li ul a {
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 0px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 0px;
border-bottom-left-radius: 0;
-moz-border-radius: 0;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-goog-ms-border-radius: 0;
border-radius: 0;
}

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

.d30bl 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-right: 1px solid rgb(38,66,80);border-bottom: 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;}

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

.d30blfixe 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>

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

* * * * *
Le code permettant de réaliser la 12° barre de liens (rouge) est le suivant:

<div class="d30ro">

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

<li><div class="d30rofixe"><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="d30rofixe"><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">
.d30ro, .d30ro ul{list-style: none;text-align: center;z-index:999;padding: 0;margin: 0;}
.d30ro{width:925px;margin:0px auto;margin-top:0px;}
.d30ro li{float: left;}
.d30ro li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.d30ro li:hover ul ul {left: -999em;}
.d30ro li:hover ul ul ul{left: -999em;}
.d30ro li:hover ul, .d30ro li li:hover ul,.d30ro li li li:hover ul{left: auto;min-height:1%;}

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

.d30ro li a {
margin-right:4px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-goog-ms-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.d30ro li ul a {
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 0px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 0px;
border-bottom-left-radius: 0;
-moz-border-radius: 0;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-goog-ms-border-radius: 0;
border-radius: 0;
}

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

.d30ro 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-right: 1px solid rgb(90,0,0);border-bottom: 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;}

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

.d30rofixe 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>

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

* * * * *
Le code permettant de réaliser la 13° barre de liens (verte) est le suivant:

<div class="d30ve">

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

<li><div class="d30vefixe"><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="d30vefixe"><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">
.d30ve, .d30ve ul{list-style: none;text-align: center;z-index:999;padding: 0;margin: 0;}
.d30ve{width:925px;margin:0px auto;margin-top:0px;}
.d30ve li{float: left;}
.d30ve li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.d30ve li:hover ul ul {left: -999em;}
.d30ve li:hover ul ul ul{left: -999em;}
.d30ve li:hover ul, .d30ve li li:hover ul,.d30ve li li li:hover ul{left: auto;min-height:1%;}

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

.d30ve li a {
margin-right:4px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-goog-ms-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.d30ve li ul a {
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 0px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 0px;
border-bottom-left-radius: 0;
-moz-border-radius: 0;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-goog-ms-border-radius: 0;
border-radius: 0;
}

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

.d30ve 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-right: 1px solid rgb(78,95,71);border-bottom: 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;}

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

.d30vefixe 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>

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

* * * * *
Le code permettant de réaliser la 14° barre de liens (beige) est le suivant:

<div class="d30be">

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

<li><div class="d30befixe"><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="d30befixe"><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">
.d30be, .d30be ul{list-style: none;text-align: center;z-index:999;padding: 0;margin: 0;}
.d30be{width:925px;margin:0px auto;margin-top:0px;}
.d30be li{float: left;}
.d30be li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.d30be li:hover ul ul {left: -999em;}
.d30be li:hover ul ul ul{left: -999em;}
.d30be li:hover ul, .d30be li li:hover ul,.d30be li li li:hover ul{left: auto;min-height:1%;}

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

.d30be li a {
margin-right:4px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-goog-ms-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.d30be li ul a {
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 0px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 0px;
border-bottom-left-radius: 0;
-moz-border-radius: 0;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-goog-ms-border-radius: 0;
border-radius: 0;
}

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

.d30be 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-right: 1px solid rgb(135,94,74);border-bottom: 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;}

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

.d30befixe 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>

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

4 commentaires:

Pamotte a dit…

Bonjour,

Merci pour ce tuto très complet et clair. J'ai cependant un souci : tout se passe bien pour les liens de niveau 1 et 2 (exemple : lien 3 > lien 3.1). Cependant, dès que j'essaie de mettre des liens de niveau 3 et plus, ils se superposent au lieu de se décaler comme sur votre modèle.

Savez-vous de quoi cela peut-venir ?

Je vous remercie pour votre aide,
Alice

Meiser a dit…

Bonjour.

Le template (modèle) ou le navigateur peuvent avoir une influence.

Avec les templates de Blogger de 20006, il n'y a aucun problème.

On peut modifier cette instruction qui règle le décalage vers la droite et le haut :
.d30bl li ul ul{margin: -34px 0 0 144px;min-height: 0;}


peek-a-boo with us a dit…

Bonjour,

Le tuto est super, j'ai réussi à faire le menu comme je souhaitais cependant il n'est pas aligné à gauche mais au centre de la page. Savez-vous comment je pourrais remédier à cela ?

Merci d'avance pour votre réponse,
Elodie

Honey Books a dit…

Bonjour et un énorme merci pour se tuto qui est plus que complet et compréhensible, enfin !!!!!
Cependant j'ai un léger problème. La barre de mes sous menu ne s'affiche pas en entière.
je vous laisse mon blog pour plus de compréhension
http://honey-b-books.blogspot.fr/
merci d'avance si vous avez une solution, sinon tanpis cela ne gache rien c'est superbe ^^
Merci encore