أضافة قائمة منسدلة

الكود في التخطيط


<nav id='inv-navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='maxwrap'>
<input type="checkbox" />القائمة &#9776;
<ul>
<li class='indie'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><span itemprop='name'>الرئيسة</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>المدونة</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>عن المدونة</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>اتصل بنا</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>إخلاء المسؤولية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>سياسة الخصوصية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>الفهرس</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>اتفاقية الاستخدام</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>اربح اونلاين</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>معلومات هامة</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>انترنت</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>صحة</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>التسميات</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>عن المدونة</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>اتصل بنا</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>إخلاء المسؤولية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>سياسة الخصوصية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>الفهرس</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>اتفاقية الاستخدام</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>صفحة خطأ</span></a></li>
</ul>
</div>
</nav>

الكود قي skin

/* Main Navigation by Sory Mohajer */
#inv-navigation{background:#fff;font-size:0;white-space:nowrap;margin:0 auto}
#inv-navigation ul.menus{height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#inv-navigation a{display:block;padding:15px 12px;text-decoration:none;color:#fff}
#inv-navigation ul,#inv-navigation li{background:#4AA3DF;margin:0 auto;padding:0;list-style:none}
#inv-navigation li{display:inline-block;position:relative;font-size:14px;font-weight:700;text-align:right;float:right}
#inv-navigation li.indie a{background:rgba(0,0,0,0.06);padding:15px}
#inv-navigation li:hover.indie,#inv-navigation li:hover.indie a{background:rgba(0,0,0,.06)}
#inv-navigation input{display:none;margin:0;padding:0;width:80px;height:45px;opacity:0;cursor:pointer}
#inv-navigation label{display:none;width:55px;height:48px;line-height:48px;text-align:center}
#inv-navigation label span{font-size:16px;position:absolute;right:55px}
#inv-navigation ul.menus li{display:block;width:100%;text-transform:none;text-shadow:none}
#inv-navigation ul.menus a{color:#ec3838;line-height:55px}
#inv-navigation li a:hover{background:rgba(0,0,0,.06);color:#fff}
#inv-navigation ul.menus a:hover{background:rgba(0,0,0,.06);color:#fff}
#inv-navigation li ul{visibility:hidden;opacity:0;background:#fff;margin:0;width:150px;height:auto;position:absolute;top:100%;right:0;z-index:10;box-shadow:0 4px 15px -2px rgba(0,0,0,0.1)}
#inv-navigation li:hover ul.menus,#inv-navigation li:hover >
ul{visibility:visible;opacity:1}
#inv-navigation li li{display:block;float:none;font-size:13px;border-bottom:1px solid #f5f5f5}
#inv-navigation li li:last-child{border:0}
#inv-navigation li ul ul{right:100%;top:0}
#inv-navigation li li >
a{background:#fff;color:#999;display:block;padding:7px 15px;margin:0;text-decoration:none;text-transform:none;font-weight:400;border-right:2px solid transparent;transition:background .3s}
#inv-navigation li li:hover,#inv-navigation li li a:hover{background:#fafafa;color:#444;border-right:2px solid #ccc}
@media screen and (max-width:800px){
#menu{display:block}
#inv-navigation{font-size:initial;color:#888;position:relative;display:block;padding:20px;font-weight:700}
#inv-navigation ul{background:#fff;position:absolute;top:100%;right:0;z-index:3;height:auto;display:none}
#inv-navigation ul.menus{width:100%;position:static;padding-right:20px}
#inv-navigation li{background:#fff;display:block;float:none;width:auto}
#inv-navigation a,#inv-navigation li a:hover{color:#444}
#inv-navigation li.indie a{background:#fff;padding:7px 12px}
#inv-navigation input,#inv-navigation label{position:absolute;top:0;right:0;display:block}
#inv-navigation input{z-index:4}
#inv-navigation input:checked + label{color:#888}
#inv-navigation input:checked ~ ul{display:block;width:100%}
#inv-navigation li:hover >  ul{width:100%}
#inv-navigation li li{border:0}
#inv-navigation li li >  a{background:#f9f9f9;color:#888;transition:initial;font-weight:700}
#inv-navigation li li:hover,#inv-navigation li li a:hover{background:#bbb;color:#fff;box-shadow:inset 3px 0 0 transparent}
#inv-navigation li ul{background:rgba(0,0,0,.15);display:block;visibility:visible;opacity:1;padding:0;position:relative;width:100%;right:initial;box-shadow:none}
#inv-navigation li:hover ul.menus,#inv-navigation li:hover >  ul{right:initial}
}