<style type="text/css">

ul#off {list-style-type:none; padding:0; margin:0; width:360px; height:360px; margin:1em auto; position:relative;}
ul#off li {display:block;}
ul#off a {display:block; width:0; height:0; position:absolute; text-decoration:none; font-size:1em; line-height:40px;}

ul#off a.one {top:0; left:80px;}
ul#off a.two {top:40px; left:160px;}
ul#off a.three {top:80px; left:240px;}
ul#off a.four {top:80px; left:40px;}
ul#off a.five {top:120px; left:120px;}
ul#off a.six {top:160px; left:200px;}
ul#off a.seven {top:160px; left:0;}
ul#off a.eight {top:200px; left:80px;}
ul#off a.nine {top:240px; left:160px;}

ul#off a em.top {display:block; font-style:normal; width:40px; height:40px; color:#000; position:absolute; top:0; left:40px; cursor:pointer;}
ul#off a em.middle {display:block; font-style:normal; width:120px; height:40px; color:#000; position:absolute; top:40px; left:0; cursor:pointer; text-align:center; color:#fff;}
ul#off a em.bottom {display:block; font-style:normal; width:40px; height:40px; color:#000; position:absolute; top:80px; left:40px; cursor:pointer;}

ul#off a.one em {background:#666633;}
ul#off a.two em {background:#669966;}
ul#off a.three em {background:#669999;}
ul#off a.four em {background:#6699CC;}
ul#off a.five em {background:#6699FF;}
ul#off a.six em {background:#9999FF;}
ul#off a.seven em {background:#9999CC;}
ul#off a.eight em {background:#999999;}
ul#off a.nine em {background:#999966;}

ul#off a:hover {color:#c00;}
ul#off a:hover em {background:#000; color:#fc0;}
ul#off a:active, ul#off a:focus {background:#eee;}
ul#off a:active em, ul#off a:focus em {background:#FF66FF; color:#000;}


</style>

<ul id="off">
<li><a class="one" href="http://www.arabwebtalk.com/index.php"><em class="top"></em><em class="middle">الصوتيات</em><em class="bottom"></em></a></li>
<li><a class="two" href="http://www.arabwebtalk.com/index.php"><em class="top"></em><em class="middle">المرئيات</em><em class="bottom"></em></a></li>
<li><a class="three" href="http://www.arabwebtalk.com/index.php"><em class="top"></em><em class="middle">الفيديو</em><em class="bottom"></em></a></li>
<li><a class="four" href="http://www.arabwebtalk.com/index.php"><em class="top"></em><em class="middle">الصور</em><em class="bottom"></em></a></li>
<li><a class="five" href="http://www.arabwebtalk.com/index.php"><em class="top"></em><em class="middle">البرامج</em><em class="bottom"></em></a></li>
<li><a class="six" href="http://www.arabwebtalk.com/index.php"><em class="top"></em><em class="middle">المكتبة</em><em class="bottom"></em></a></li>
<li><a class="seven" href="http://www.arabwebtalk.com/index.php"><em class="top"></em><em class="middle">راسلنا</em><em class="bottom"></em></a></li>
<li><a class="eight" href="http://www.arabwebtalk.com/index.php"><em class="top"></em><em class="middle">البطاقات</em><em class="bottom"></em></a></li>
<li><a class="nine" href="http://www.arabwebtalk.com/index.php"><em class="top"></em><em class="middle">الجوال</em><em class="bottom"></em></a></li>
</ul>
</body>