أكواد مثال قائمة الروابط 10

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

<div class="d30no">

<li><a style="color:black;background:#ddd;"href="#">الرئيسية</a></li>

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

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

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

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

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

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

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