قائمة رأسية احترافية متعددة الاستخدامات لمدونات بلوجر

♫ بعض اقتراحاتى لاستخدام  القائمة  ♫

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>
   <style>ul.container{
    width:275px;
    padding:5px;font-family: 'Droid Arabic Kufi';
  text-align:center;
  text-decoration:none;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}
li.title
{
border-radius:5px;
background:#1b9bff;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;text-decoration: none;
}
.downlistie li{
list-style: none;
background: #E6E3E3;
border-radius: 5px;
margin: 5px 5px 6px -32px;
padding: 4px 10px;
text-decoration: none;
}
.downlistie li:hover {
background:orange;text-decoration: none;
}
.downlistie li a{text-decoration: none;
{
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333333;
}
</style><ul class="container">          <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" > مدونة ابداعاتى </a></li>          
                <li class="downlistie">
                    <ul>
    <li><a  href="#" >بلوجر</a></li>
    <li><a  href="#">اضافات بلوجر</a></li>
    <li><a href="#">قوالب بلوجر</a></li>
                    </ul></li></ul></li>
 
    <li class="accoi-menu">
       
              <ul>
                <li class="title"><a href="#" >مدونة ابداعاتى </a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >فيس بوك</a></li>
    <li><a href="#">جوجــل</a></li>
    <li><a href="#">ألعاب</a></li>              
                 </ul></li></ul></li>
 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >مدونة ابداعاتى </a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >قوالب بلوجر</a></li>
    <li><a href="#">حصريات</a></li>
    <li><a href="#">أفــــلام</a></li>
    <li><a href="#">منوعات</a></li>
         </ul></li></ul></li>
 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >مدونة ابداعاتى </a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >تصميم قوالب</a></li>
    <li><a href="#">بلــوجر</a></li>
    <li><a href="#">اضافات بلوجر</a></li>
    <li><a href="#">قوالب مدفوعة</a></li>                
                 </ul></li></ul></li>

 <li class="accoi-menu">
          <ul>
                <li class="title"><a href="#" > مدونة ابداعاتى </a></li>
                  <li class="downlistie">
                    <ul>
    <li><a href="#" >كوميديا</a></li>
    <li><a href="#">منوعات</a></li>
     <li><a href="#">من نحن</a></li>
    <li><a href="#">اتصل بنا</a></li>
              </ul></li></ul></li>
    </ul>  

♦  التعديلات المتاحة على القائمة  ♦ 

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

فى موضوع سابق قدمت لكم قائمة أخرى رأسية لمدونات بلوجر
مع خاصية الوصف و رموز جانبية لكل قسم بشكل بسيط
و منتظم
المعاينة >> من هنا
احصل عليها >> من هنا