اضافة قائمة رأسية احترافية لمدونتك

<style>

#menu {

 background: white;

 width: 280px;

 padding:10px;

}

#menu ul {

 margin:0;

 padding:0;

 list-style: none;

}

#menu ul li {

 margin: 0;

 padding: 5px 0 10px;

 border-bottom: 1px dashed #EAEAEA;

}

#menu ul li img {

 float: right;

 padding: 3px 0 0 10px;

}

#menu ul li a {

 font: normal 18px default ;

 color: #007195;

 text-decoration:none;

}

#menu ul li a:hover {

 color:#CC3332;

}

#menu ul li span {

 font: normal 13px ;

 color:#7D7D7D;

}

#menu li span:hover {

 color: #494949;

}

</style>

<div id="menu">

 <ul>

 <li><img  src="http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/32/blue-home-icon.png"  border="0" alt="" /><a href="#">الرئيسية<br />

 <span>رئيسية المدونة</span></a></li>

 <li><img  src="http://icons.iconarchive.com/icons/mattahan/umicons/32/Folder-Folder-Options-icon.png"  border="0" alt="" /><a href="#">مدونة ابداعاتى<br />

 <span>الوصـــــف</span></a></li>

 <li><img  src="http://icons.iconarchive.com/icons/aha-soft/free-large-boss/32/Admin-icon.png"  border="0" alt="" /><a href="#">مدونة ابداعاتى<br />

 <span>الوصــــــف</span></a></li>

<li><img  src="http://icons.iconarchive.com/icons/iconshock/real-vista-networking/32/phone-icon.png"  border="0" alt="" /><a href="#">مدونة ابداعاتى<br />

 <span>الوصــــــف</span></a></li>

<li><img  src="http://icons.iconarchive.com/icons/gakuseisean/aire/32/Images-icon.png"  border="0" alt="" /><a href="#">مدونة ابداعاتى<br />

 <span>الوصــــــف</span></a></li>

<li><img  src="http://icons.iconarchive.com/icons/kyo-tux/ginux/32/Start-Menu-Prorgrams-icon.png"  border="0" alt="" /><a href="#">مدونة ابداعاتى<br />

 <span>الوصــــــف</span></a></li>

 </ul>

</div>