اسهل طريقة لانشاء قوائم منسدلة ومتجاوبة لمدونات بلوجر للمبتدأين

/* Navigation
----------------------------------------------- */
#mobilenav,.rcbytag.s .comnum,.rcbytag.h .a0 .comnum,.rcbytag.v .a0 .comnum{display:none}
#nav{height:40px;position:relative}
.sf-menu,.sf-menu *{margin:0;padding:0;list-style:none}
.sf-menu li{position:relative}
.sf-menu ul{position:absolute;display:none;top:100%;right:0;z-index:99}
.sf-menu > li{float:right;margin:0 1px}
.sf-menu li:hover > ul,.sf-menu li.sfHover > ul{display:block}
.sf-menu a{display:block;position:relative}
.sf-menu > li > a{font-size:110%}
.sf-menu ul ul{top:0;left:100%}
.sf-menu{float:right}
.sf-menu ul{min-width:12em;padding-top:5px;*width:12em}
.sf-menu a{padding:0 10px;height:40px;line-height:40px;text-decoration:none;zoom:1}
.sf-menu a.home{background-color:#15587D;text-indent:-9999px;padding:0;width:45px;margin-right:4px;text-indent:-9999px}
.sf-menu a{color:#FFFFFF;font-size:100%}
.sf-menu li{white-space:nowrap;*white-space:normal;-moz-transition:background-color .2s;-webkit-transition:background-color .2s;transition:background-color .2s;position:relative}
.sf-menu ul li{background-color:#333;margin:1px 0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}
.sf-menu ul a{font-weight:normal;height:30px;line-height:30px}
.sf-menu ul a:hover{padding-right:12px}
.sf-menu ul ul li{background:#3C3C3C;margin:0 0 1px 2px}
.sf-menu li:hover > a,.sf-menu li.sfHover,.sf-menu > li > a.current{background-color:#15587D;-moz-transition:none;-webkit-transition:none;transition:none}
.sf-arrows .sf-with-ul{padding-left:2em;*padding-left:1em}
.sf-arrows .sf-with-ul:after{content:'';position:absolute;top:50%;left:0.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFFFFF}
.sf-arrows > li > .sf-with-ul:focus:after,.sf-arrows > li:hover > .sf-with-ul:after,.sf-arrows > .sfHover > .sf-with-ul:after{border-top-color:#FFFFFF}
.sf-arrows ul .sf-with-ul:after{margin-top:-5px;margin-left:-3px;border-color:transparent;border-right-color:#FFFFFF}
.sf-arrows ul li > .sf-with-ul:focus:after,.sf-arrows ul li:hover > .sf-with-ul:after,.sf-arrows ul .sfHover > .sf-with-ul:after{border-right-color:#FFFFFF}
.sf-menu li > i{position:absolute;top:5px;left:3px;width:27px;height:22px;cursor:pointer;display:none;background-color:#15587D;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;outline:0}
.sf-menu li > i:after{content:'+';color:#FFFFFF;font-size:19px;position:absolute;right:5px;top:-2px}
.sf-menu li > i.active:after{content:'-';font-size:36px;top:-14px}
/* Social Icon */
#socialicon{float:left;width:179px;padding:8px 0}
#socialicon ul,#socialicon li{padding:0;margin:0;list-style:none}
#socialicon li{float:right;margin:0 2px}
#socialicon a{display:block;text-indent:-9999px;width:24px;height:24px;background-image:url(http://3.bp.blogspot.com/-7N7Yc9pfpq4/UZWTCyT3cLI/AAAAAAAAARk/v8jfsiRfs9c/s1600/soicon.png);background-position:-1px 0;background-repeat:no-repeat;position:relative}
#socialicon a:active{top:1px}
#socialicon .fbx{background-position:-1px 0}
#socialicon .twix{background-position:-27px 0}
#socialicon .goex{background-position:-53px 0}
#socialicon .linx{background-position:-131px}
#socialicon .pinx{background-position:-79px 0}
#socialicon .drix{background-position:-157px}
#socialicon .vmex{background-position:-183px 0}
#socialicon .rssx{background-position:-105px}
#topmenu{overflow:hidden;padding:0 5px;color:#FFFFFF;font-size:90%}
#topmenu .tgltop{float:right;height:26px;line-height:26px;padding:4px 6px}
.sf-menu a.home:before,#searchnya button:before,#view a:before,.post-footer a.timestamp-link:before,.post-footer .post-author.vcard .fn:before,.post-footer .comment-link:before,.post-footer .post-labels > span:before,.rcentpost .date:before,.rcentpost .comnum:before,.morepostag a:before,#mobilenav:before,.comments .comments-content .icon.blog-author:before{position:absolute;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}
.sf-menu a.home:before,#searchnya button:before,#view a:before{text-indent:0}
.sf-menu a.home:before{width:30px;height:30px}
.sf-menu a.home:before{content:"f015";top:0;font-size:27px;left:9px}
@media only screen and (max-width:979px){
  #mobilenav{display:block;text-indent:-9999px;width:40px;top:2px;right:10px;position:absolute;height:36px;outline:0;background-color:#15587D;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#FFFFFF;text-decoration:none}
#mobilenav.active{color:#FFFFFF}
.sf-menu a.home:before{display:none}
#mobilenav:before{content:"f0c9";top:3px;text-indent:0;right:7px;font-size:30px}
#menunav{float:none;display:none;position:absolute;top:45px;right:10px;left:10px;z-index:99;background-color:#333;padding:5px 10px}
#menunav li{float:none;margin:0}
#menunav > li{margin:1px 0}
.sf-menu a.home,.sf-menu a{text-indent:0;margin-left:0;width:auto;height:auto;padding:0 10px;line-height:30px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background-color:#1D1D1D}
.sf-menu ul{position:static;padding-top:0}
.sf-menu ul li,.sf-menu ul ul li{background-color:transparent}
.sf-menu ul a{padding-right:20px}
.sf-menu ul ul a{padding-right:30px}
.sf-menu li:hover > ul,.sf-menu li.sfHover > ul{display:none}
.sf-menu li:hover > a,.sf-menu li.sfHover{background-color:transparent}
.sf-menu a.home,.sf-menu li:hover > a.home,.sf-menu > li > a.current{color:#FFFFFF;background-color:#15587D}
.sf-menu ul a:hover{padding-right:25px}
.sf-menu ul ul a:hover{padding-right:35px}

  <script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
   <script type='text/javascript'>
      //<![CDATA[
      //Menu Call  
      function menunav(b){b("#mobilenav").click(function(){b("#menunav").slideToggle();b(this).toggleClass("active");return false});b(".sf-menu ul").each(function(){var d=b(this).parent("li");d.append("<i></i>")});function a(){var d=b(window).width();if(d>979){b("#menunav").css("display","block");b("#menunav").superfish({animation:{height:"show"},animationOut:{height:"hide"}});b(".sf-menu i").css("display","none")}else{if(d<=979&&b("#mobilenav").attr("class")==="active"){b("#menunav").css("display","block");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}else{if(d<=979&&b("#mobilenav").attr("class")!=="active"){b("#menunav").css("display","none");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}}}}a();b(window).resize(a);b(".sf-menu i").click(function(){var d=b(this).parent("li");var e=d.children("ul");e.slideToggle();b(this).toggleClass("active");return false});var c=window.location.href;b("#menunav a").each(function(){if(this.href===c){var d=b(this).parents("li").children("a").addClass("current")}})};
      ;(function($){
        $.fn.superfish = function(op){
          var sf = $.fn.superfish,
              c = sf.c,
              $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
              over = function(){
                var $$ = $(this), menu = getMenu($$);
                clearTimeout(menu.sfTimer);
                $$.showSuperfishUl().siblings().hideSuperfishUl();
              },
              out = function(){
                var $$ = $(this), menu = getMenu($$), o = sf.op;
                clearTimeout(menu.sfTimer);
                menu.sfTimer=setTimeout(function(){
                  o.retainPath=($.inArray($$[0],o.$path)>-1);
                  $$.hideSuperfishUl();
                  if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
                },o.delay);    },
              getMenu = function($menu){
                var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
                sf.op = sf.o[menu.serial];
                return menu;
              },
              addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
          return this.each(function() {
            var s = this.serial = sf.o.length;
            var o = $.extend({},sf.defaults,op);
            o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
              $(this).addClass([o.hoverClass,c.bcClass].join(' '))
              .filter('li:has(ul)').removeClass(o.pathClass);
            });
            sf.o[s] = sf.op = o;
            $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
              if (o.autoArrows) addArrow( $('>a:first-child',this) );
            })
            .not('.'+c.bcClass)
            .hideSuperfishUl();
            var $a = $('a',this);
            $a.each(function(i){
              var $li = $a.eq(i).parents('li');
              $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
            });
            o.onInit.call(this);
          }).each(function() {
            var menuClasses = [c.menuClass];
            if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
            $(this).addClass(menuClasses.join(' '));
          });
        };
        var sf = $.fn.superfish;
        sf.o = [];
        sf.op = {};
        sf.IE7fix = function(){
          var o = sf.op;
          if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
            this.toggleClass(sf.c.shadowClass+'-off');
        };
        sf.c = {
          bcClass     : 'sf-breadcrumb',
          menuClass   : 'sf-js-enabled',
          anchorClass : 'sf-with-ul',
          arrowClass  : 'sf-sub-indicator',
          shadowClass : 'sf-shadow'
        };
        sf.defaults = {
          hoverClass : 'sfHover',
          pathClass : 'overideThisToUse',
          pathLevels : 1,
          delay  : 800,
          animation : {opacity:'show'},
          speed  : 'normal',
          autoArrows : true,
          dropShadows : true,
          disableHI : false,  // true disables hoverIntent detection
          onInit  : function(){}, // callback functions
          onBeforeShow: function(){},
          onShow  : function(){},
          onHide  : function(){}
        };
        $.fn.extend({
          hideSuperfishUl : function(){
            var o = sf.op,
                not = (o.retainPath===true) ? o.$path : '';
            o.retainPath = false;
            var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
            .find('>ul').hide().css('visibility','hidden');
            o.onHide.call($ul);
            return this;
          },
          showSuperfishUl : function(){
            var o = sf.op,
                sh = sf.c.shadowClass+'-off',
                $ul = this.addClass(o.hoverClass)
            .find('>ul:hidden').css('visibility','visible');
            sf.IE7fix.call($ul);
            o.onBeforeShow.call($ul);
            $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
            return this;
          }
        });
      })(jQuery);
      //]]>
    </script>

 <div class='menu'>
<div id='navitions'>
<div class='isi'>
<nav class='navix' id='nav'>
<div id='socialicon'>
<ul>
<li>
<a class='fbx' href='http://www.facebook.com/mdadice' target='_blank' title='Facebook'>
facebook
</a>
</li>
<li>
<a class='twix' href='http://twitter.com/mohammed1811990' target='_blank' title='Twitter'>
twitter
</a>
</li>
<li>
<a class='goex' href='https://plus.google.com/+مدادالجليد' target='_blank' title='Google+'>
Google+
</a>
</li>
<li>
<a class='linx' href='#' target='_blank' title='Linkedin'>
Linkedin
</a>
</li>
<li>
<a class='pinx' href='http://www.pinterest.com/mohammedmaher/' target='_blank' title='Pinterest'>
Pinterest
</a>
</li>
<li>
<a class='rssx' href='http://feeds.feedburner.com/blogspot/medad' target='_blank' title='RSS'>
RSS
</a>
</li>
</ul>
</div>
<a href='#' id='mobilenav'>
الصفحات
</a>
<ul class='sf-menu' id='menunav'>
<li>
<a class='home' href='/'>
الرئيسية
</a>
</li>
<li>
<a href='#'>
قائمة 1
</a>
<ul>
<li>
<a href='#'>
تعديل 1
</a>
</li>
<li>
<a href='#'>
تعديل 2
</a>
</li>
<li>
<a href='#'>
تعديل 3
</a>
</li>
<li>
<a href='#'>
تعديل 4
</a>
</li>
<li>
<a href='#'>
تعديل5
</a>
</li>
</ul>
</li>
<li>
<a href='#' target='_blank'>
قائمة 2
</a>
</li>
<li>
<a href='#'>
قائمة 3
</a>
<ul>
<li>
<a href='#'>
تعديل 1
</a>
</li>
<li>
<a href='#'>
تعديل 2
</a>
</li>
<li>
<a href='#'>
تعديل 3
</a>
</li>
<li>
<a href='#'>
تعديل 4
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
قائمة 4
</a>
<ul>
<li>
<a href='#'>
تعديل 1
</a>
</li>
<li>
<a href='تعديل 2'>
اسلاميات
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
أدوات تحرير الصور
</a>
<ul>
<li>
<a href='http://www.madad2.com/p/blog-page_9.html' target='_blank'>
صنع إطار لصورك
</a>
</li>
<li>
<a href='http://www.madad2.com/p/blog-page_23.html' target='_blank'>
محرر الصور
</a>
</li>
<li>
<a href='http://www.photoshop-online.madad2.com/' target='_blank'>
فوتوشوب أون لاين
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
أدوات
</a>
<ul>
<li>
<a href='http://www.madad2.com/p/blog-page_3482.html' target='_blank'>
تحويل كود أدسنس
</a>
</li>
<li>
<a href='http://www.madad2.com/p/blog-page_10.html' target='_blank'>
أعرف IP جهازك
</a>
</li>
<li>
<a href='http://www.madad2.com/p/cellspacing0-stylewidth-99-function.html' target='_blank'>
عداد الأحرف
</a>
</li>
<li>
<a href='http://www.madad2.com/p/blog-page_26.html' target='_blank'>
صانع اكواد الالوان
</a>
</li>
<li>
<a href='http://www.madad2.com/p/html-javascribt.html' target='_blank'>
أداة تشفير/ فك تشفير HTML JavaScript
</a>
</li>
<li>
<a href='http://www.madad2.com/2013/10/Decoration-2014.html ' target='_blank'>
أكتب أسمك على شكل قلب حب&#9829;
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
روابط مفيدة
</a>
<ul>
<li>
<a href='http://flash-girls.blogspot.com/' target='_blank'>
ألعاب فلاش أون لاين
</a>
</li>
<li>
<a href='http://mdadalgled.blogspot.com/' target='_blank'>
أجمل الخلفيات HD
</a>
</li>
<li>
<a href='http://androidarbi.blogspot.com/' target='_blank'>
تطبيقات الاندرويد
</a>
</li>
<li>
<a href='http://www.templates.madad2.com/' target='_blank'>
قوالب بلوجر
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
المزيد..
</a>
<ul>
<li>
<a href='#' target='_blank'>
تعديل
</a>
</li>
<li>
<a href='#' target='_blank'>
تعديل
</a>
</li>
<li>
<a href='#' target='_blank'>
تعديل 
</a>
</li>
<li>
<a href='#' target='_blank'>
قائمة 7
</a>
</li>
</ul>
</li>
</ul>
<script type='text/javascript'>menunav(jQuery);searchxx({summaryLength:100,scrthumbSize:50});</script>
</nav>
</div>
</div>
</div>

#menu{background:#464646;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:right;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;left:9px}
@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;left:0;right:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:right}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}

 <nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>القائمة</span></label>
<ul>
<li><a href='/' title="Home">الرئيسية</a></li>
<li><a href='#' title="وصف 1">تعديل 1</a></li>
<li><a class='prett' href='#' title="وصف">قائمة 1</a>
<ul class='menus'>
<li><a href='#' title="وصف">تعديل 1</a></li>
<li><a href='#' title="وصف">تعديل 2</a></li>
<li><a href='#' title="وصف">تعديل 3</a></li>
</ul>
</li>
<li><a href='#' title="وصف 2">قائمة 2</a></li>
<li><a class='prett' href='#' title="وصف">تعديل 1</a>
<ul class='menus'>
<li><a href='#' title="وصف 1">تعديل 1</a></li>
<li><a href='#' title="وصف 2">تعديل 2</a></li>
<li><a href='#' title="وصف 3">تعديل 3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>ترجمة</a></li>
</ul>
</nav>