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

<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>