عرض التسميات فى المدونه بطريقه جديدة

#arabetutorial1 ul li{

color:#2D2C28;

float: right;

width: 45%;

}

#arabetutorial2 ul li{

color:#2D2C28;

float: left;

width: 45%;

}

#arabetutorial1 li{

margin-bottom:5px;

padding:5px;

}

#arabetutorial1 li a{

color: #777777;

font: 12px verdana;

height: 30px;

width:120px;

font-family:'DroidKufi-regular',Arial,Helvetica,Tahoma,sans-serif;

text-transform: uppercase;

transition: border-color .218s;

background:#f4f4f4;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

display: inline-block;

text-shadow: 0 1px 0 #fff;

-webkit-transition: border-color .218s;

-moz-transition: border .218s;

-o-transition: border-color .218s;

transition: border-color .218s;

background:#f3f3f3;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

border: solid 1px#ccc;

border-radius: 2px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

margin: 0 4px 4px 0;

padding: 3px 5px;

text-decoration: none;

text-align: center;

}

#arabetutorial1 li:hover{

background:#FCFEFE; 

color:#00D1FF;

padding:5px;

cursor:pointer;

}

#arabetutorial1 li a:hover{

color:#333;

font-size:12px;

border-color: #999;

-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);

box-shadow: 0 1px 2px

rgba(0,0,0,0.15);

}

<div id="arabetutorial1">

<ul>

<li><a href="#">التسمية الأولى</a></li>

<li><a href="#">التسمية الثانية</a></li>

<li><a href="#">التسمية الثالثة</a></li>

<li><a href="#">التسمية الرابعة</a></li>

<li><a href="#">التسمية الخامسة</a></li>

</ul>

</div>