أكواد أمثلة قوائم الروابط من 5 إلى 6

كود قائمة الروابط رقم 05 باللون الأسود كالتالي:

<div class="d20no">

<li><a href="#">الرئيسية</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 2</a></li>

<li><div class="d20nofixe"><a href="#">الرابط 3</a></div><ul>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.1</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.2</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.3</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.4</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.5</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.6</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.7</a></li></ul></li>

<li><div class="d20nofixe"><a href="#">الرابط 4</a></div><ul>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.1</a></li>

<li><div class="d20nofixe"><a href="#">الرابط 4.2</a></div><ul>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.2.1</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.2.2</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.2.3</a></li></ul></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.3</a></li>

<li><div class="d20nofixe"><a href="#">الرابط 4.4</a></div><ul>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.4.1</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.4.2</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.4.3</a></li></ul></li></ul></li>

<li><div class="d20nofixe"><a href="#">الرابط 5</a></div><ul>

<li><div class="d20nofixe"><a href="#">الرابط 5.1</a></div><ul>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.1.1</a></li>

<li><div class="d20nofixe"><a href="#">الرابط 5.1.2</a></div><ul>

<li><a href="http://youstaff.blogspot.com/" target="_blank">L. 5.1.2.1</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">L. 5.1.2.2</a></li></ul></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.1.3</a></li></ul></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.2</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.3</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.4</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.5</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.6</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.7</a></li></ul></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 6</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">7 الرابط  </a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">8 الرابط </a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">9 الرابط </a></li>

<a href="http://youstaff.blogspot.com" style="display:none;">blogger</a>

</div>

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

.d20no li ul {margin-left:-28px;width:143px;border: 1px solid black;}
.d20no li ul ul{width:143px;border-left: 1px solid red;}
.d20no li ul ul{margin: -33px 0 0 144px;min-height: 0;}

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

.d20no a {color:red;background:black;padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;}

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

.d20nofixe a:hover {color:red;background:black;}
</style>

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

* * * * *

كود قائمة الروابط رقم 06 باللون الرمادي كالتالي:

<div class="d10gr">

<li><div class="couleurrouge"><a href="#">الرئيسية</a></div></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 2</a></li>

<li><div class="d10grfixe"><a href="#">الرابط 3</a></div><ul>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.1</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.2</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.3</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.4</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.5</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.6</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 3.7</a></li></ul></li>

<li><div class="d10grfixe"><a href="#">الرابط 4</a></div><ul>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.1</a></li>

<li><div class="d10grfixe"><a href="#">الرابط 4.2</a></div><ul>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.2.1</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.2.2</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.2.3</a></li></ul></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.3</a></li>

<li><div class="d10grfixe"><a href="#">الرابط 4.4</a></div><ul>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.4.1</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.4.2</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 4.4.3</a></li></ul></li></ul></li>

<li><div class="d10grfixe"><a href="#">الرابط 5</a></div><ul>

<li><div class="d10grfixe"><a href="#">الرابط 5.1</a></div><ul>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.1.1</a></li>

<li><div class="d10grfixe"><a href="#">الرابط 5.1.2</a></div><ul>

<li><a href="http://youstaff.blogspot.com/" target="_blank">L. 5.1.2.1</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">L. 5.1.2.2</a></li></ul></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.1.3</a></li></ul></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.2</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.3</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.4</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.5</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.6</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 5.7</a></li></ul></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">الرابط 6</a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">7 الرابط  </a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">8 الرابط </a></li>

<li><a href="http://youstaff.blogspot.com/" target="_blank">9 الرابط </a></li>

<a href="http://youstaff.blogspot.com" style="display:none;">blogger</a>

</div>

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

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

.d10gr li ul li a {width:125px;margin-top:1px;margin-bottom:0px;margin-left:-28px;}
.d10gr li ul ul{margin: -34px 0 0 146px;min-height: 0;}

.d10gr a {color:#191970;background:#ddd;border-right: 1px solid #000;border-bottom: 1px solid #000;padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;margin-bottom:1px;line-height: 18px;}
.couleurrouge a {color:red;}
.d10gr a:hover{color:white;background:blue;}
.d10grfixe a:hover {color:#191970;background:#ddd;}
</style>

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