قائمة منسدلة خفيفة فقط CSS

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