barre de liens horizontale déroulante codes 4

obtenir ces boutons

Barre de liens horizontale
DÉROULANTE A QUATRE NIVEAUX :
CODE DE L'EXEMPLE 10

Sur cette page, se trouve le code correspondant à l'exemple 10 de barre de liens horizontale déroulante à 4 niveaux (explications : ici). EXEMPLES ICI.

* * * * *
Le code pour obtenir la barre de liens NOIRS avec des BORDS ARRONDIS au-dessus qui constitue le 10° exemple est le suivant :

<div class="d30no">

<li><a style="color:black;background:#ddd;"href="#">ACCUEIL</a></li>

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

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

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

.d30no li ul {border-top: 1px solid black;width:144px;margin-top:-1px;}

.d30no li ul ul{border-left: 1px solid #bbb;}

.d30no 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;
}
.d30no 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;
}

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

.d30no a {color:white;
background:black;border-right: 1px solid black;border-bottom: 1px solid black;padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;}

.d30no a:hover{color:black;background:#ddd;}

.d30nofixe a:hover {color:white;background:black}

</style>

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

1 commentaire:

Amira Stardoll a dit…
Ce commentaire a été supprimé par l'auteur.