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

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

* للحصول على قائمة روابط باللون الأحمر ما عليك سوى بتغيير اللون blue الى red.

* للحصول على قائمة روابط باللون الأخضر قم بتغيير اللون blue الى green.

كما بإمكانك استخدام أي لون يناسب تصميمك، فقط غير اللون blue على مستوى الكود css (ما بين العارضتين <style> و <style/>) على ثلاث مرات باللون الذي تريده.

<div class="d50bl">

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

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

<li><div class="d50blfixe"><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="d50blfixe"><a href="#">الرابط 4</a></div><ul>

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

<li><div class="d50blfixe"><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="d50blfixe"><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="d50blfixe"><a href="#">الرابط 5</a></div><ul>

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

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

<li><div class="d50blfixe"><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">
.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>