<style type="text/css">

#clouds {background: url (clouds.jpg); padding:2em 0; position:relative;}

ul#off {list-style-type:none; padding:0; margin:0; width:360px; height:180px; margin:2em auto; position:relative;}
ul#off li {display:block; width:0; height:0;}

ul#off a {display:block; width:0; height:0; text-decoration:none; position:absolute;}
ul#off a.blue {top:0; left:0; color:#fff;}
ul#off a.black {top:0; left:120px; color:#fff;}
ul#off a.red {top:0; left:240px; color:#fff;}
ul#off a.yellow {top:60px; left:60px; color:#000;}
ul#off a.green {top:60px; left:180px;color:#000;}

ul#off a em {position:absolute; display:block; cursor:pointer; font-style:normal; font-weight:bold;}

ul#off a em.h6 {height:20px; width:120px; font-size:10px; font-style:normal; text-align:center; font-weight:bold; line-height:20px;}
ul#off a em.h3 {height:20px; width:60px;}
ul#off a em.h2 {height:20px; width:40px;}

ul#off a em.v4 {height:80px; width:20px;}
ul#off a em.v2 {height:40px; width:20px;}
ul#off a em.v1 {height:20px; width:20px;}

ul#off a em.ha {top:0; left:0;}
ul#off a em.hb {top:0; left:60px;}
ul#off a em.hc {top:100px; left:0;}
ul#off a em.hd {top:100px; left:80px;}

ul#off a em.va {top:20px; left:0;}
ul#off a em.vb {top:20px; left:100px;}
ul#off a em.vc {top:60px; left:100px;}
ul#off a em.vd {top:80px; left:0;}

.blue em {background:transparent url(http://www.cssplay.co.uk/menus/blue.gif);}
.black em {background:transparent url(http://www.cssplay.co.uk/menus/black.gif);}
.red em {background:transparent url(http://www.cssplay.co.uk/menus/red.gif);}
.yellow em {background:transparent url(http://www.cssplay.co.uk/menus/yellow.gif);}
.green em {background:transparent url(http://www.cssplay.co.uk/menus/green.gif);}

ul#off a:hover {background:#ddd;}
ul#off a.blue:hover em {background:#00c;}
ul#off a.black:hover em {background:#000;}
ul#off a.red:hover em {background:#c00;}
ul#off a.yellow:hover em {background:#ee0;}
ul#off a.green:hover em {background:#0c0;}

ul#off a:active, ul#off a:focus {background:#fff;}
ul#off a.blue:active em, ul#off a.blue:focus em {background:#66c; color:#000;}
ul#off a.black:active em, ul#off a.black:focus em {background:#666; color:#000;}
ul#off a.red:active em, ul#off a.red:focus em {background:#c66; color:#000;}
ul#off a.yellow:active em, ul#off a.yellow:focus em {background:#ee6; color:#000;}
ul#off a.green:active em, ul#off a.green:focus em {background:#6c6; color:#000;}


</style>

<div id="clouds">


<ul id="off">
<li><a class="blue" href="#nogo"><em class="h6 ha"><font size="4">ازرق</font></em><em class="h3 hc"></em><em class="h2 hd"></em><em class="v4 va"></em><em class="v4 vb"></em></a></li>
<li><a class="black" href="#nogo"><em class="h6 ha"><font size="4">اسود</font></em><em class="h3 hc"></em><em class="h2 hd"></em><em class="v2 va"></em><em class="v1 vd"></em><em class="v4 vb"></em></a></li>
<li><a class="red" href="#nogo"><em class="h6 ha"><font size="4">احمر</font></em><em class="h6 hc"></em><em class="v2 va"></em><em class="v1 vd"></em><em class="v4 vb"></em></a></li>
<li><a class="yellow" href="#nogo"><em class="h2 ha"></em><em class="h3 hb"></em>
<em class="h6 hc" style="position: absolute; left: 0px; top: 100px; width: 120px; height: 20px">
<font size="4">اصفر</font></em><em class="v4 va"></em><em class="v1 vb"></em><em class="v2 vc"></em></a></li>
<li><a class="green" href="#nogo"><em class="h2 ha"></em><em class="h3 hb"></em><em class="h6 hc">
<font size="4">اخضر</font></em><em class="v4 va"></em><em class="v1 vb"></em><em class="v2 vc"></em></a></li>

</ul>



</div>