-

الرئيسيةمكتبة الصورس .و .جبحـثقائمة الاعضاءالمجموعاتالتسجيلدخول

تم النشر بقلم :Yassine Bablil:08/11/15, 07:21 pm - -

 المشاركة رقم: #1
مصراوي مفيش منه
تواصل معى
معاينة صفحة البيانات الشخصي للعضو
بيانات اضافيه [+]
 الجنس : ذكر
 عدد الرسائل : 107
 نقاط : 1513
 تاريخ التسجيل : 26/10/2015
 رأيك في العضو/هـ : 0
لوني المفضل : Tomato
قائمة منسدلة جاهزة بتقنيات css حصريا على ليالي مصرية
السلام عليكم ورحمة الله وبركاته

نأتيكم اليوم بقائمة منسدلة بتقنية css جاهزة للاستخدام


https://i21.servimg.com/u/f21/18/04/55/46/sans_t20.png


الكود : طريقة تركيبه بالمكان الدي تريده بدون اي مشاكل


الرمز:
<style type="text/css">

#cnmudrdown{

  width:100%;

  height:40px;

  display:block;

  padding:0;

  margin:0 0 22px 0;

background:#222222;

}

#cnmudmenu,#drop{

    list-style:none;

    direction:rtl;

    padding:0;

    margin:0;

    }

#cnmudmenu li {

    float:right;

}

#cnmudmenu li a {

    display:block;

    padding:11px 15px;

    color:#fff;

    text-decoration:none;

    font:15px Tahoma, Geneva, sans-serif;

    font-weight:bold;

}

#cnmudmenu li a:hover {

    background:#ccc;

    color:#000;

    transition:all .7s ease 0s;

}

#drop {

    position:absolute;

    display:none;

    list-style:none;

z-index:60;

}

#drop li {

    float:none;

}

#drop li a {

background:#000;

border-bottom:1px solid #bbb;

padding:5px 10px;

width:150px;

}

   

#sub:hover #drop {

    display:block;

}

#drop2:hover #cnmudmenu3 {

    display:block;

}

#cnmudmenu3 {

    position:absolute;

    display:none;

    margin-right:131px;

    margin-top:-28px;

    }

#cnmudmenu3 li{

    list-style:none;

    margin-left:100px;

}

#cnmudmenu3 li a {

width:150px;

}

</style>



<div id='cnmudrdown'>

<ul id="cnmudmenu">

<li> <a href="#">العنصر الأول</a></li>

<li id="sub"> <a href="#">العنصر الثاني</a>
<ul id="drop">
<li> <a href="#">رابط فرعي 1 </a></li>
<li> <a href="#">رابط فرعي 2 </a></li>
<li id="drop2"> <a href="#">رابط فرعي 3 </a>
<ul id="cnmudmenu3">
<li> <a href="#">ثانوي 1</a></li>
<li> <a href="#">ثانوي 2</a></li>
<li> <a href="#">ثانوي 3</a></li>
</ul>
</li>

<li> <a href="#">رابط فرعي 4 </a></li>
<li> <a href="#">رابط فرعي 5 </a></li>
</ul>
</li>

<li> <a href="#">العنصر الثالث</a></li>

<li> <a href="#">العنصر الرابع</a></li>

</ul>

</div>

وترقبو المزيد بادن الله


تم النشر بقلم :Yassine Bablil08/11/15, 07:21 pm    

تعليقات القراء



توقيع : Yassine Bablil






الإشارات المرجعية



الــرد الســـريـع

رفع الصور رفع فيديو أغانى فوتوشوب ترجمة رموز الكتابة ردود جاهزة صندوق متطور



مواضيع ذات صلة



تعليمات المشاركة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة