STEP MENU BAR DROP DOWN (2)

(1) Paste kode dibawah ini diatas </head>

<script type='text/javascript'>
//<![CDATA[

/*
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *     http://www.opensource.org/licenses/mit-license.php
 *     http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */

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

(2) Paste kode ini di bagian <body>

   

 <script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
    jQuery('ul.menu-primary').superfish({
    animation: {opacity:'show'},
autoArrows:  true,
                dropShadows: false,
                speed: 200,
                delay: 800
                });
            });

jQuery(function(){
    jQuery('ul.menu-secondary').superfish({
    animation: {opacity:'show'},
autoArrows:  true,
                dropShadows: false,
                speed: 200,
                delay: 800
                });
            });

jQuery(document).ready(function() {
    jQuery('.fp-slides').cycle({
        fx: 'fade',
        timeout: 4000,
        delay: 0,
        speed: 400,
        next: '.fp-next',
        prev: '.fp-prev',
        pager: '.fp-pager',
        continuous: 0,
        sync: 1,
        pause: 1,
        pauseOnPagerHover: 1,
        cleartype: true,
        cleartypeNoBg: true
    });
 });

/* ]]> */
</script>
<div style='clear:both;'/>

<div class='span-24'>
<div class='menu-secondary-wrap'>

<ul class='menus menu-secondary'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>

<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>

<li><a href='#'>Featured</a></li>

<li><a href='#'>Health</a>
<ul class='children'>
<li><a href='#'>Childcare</a></li>
<li><a href='#'>Doctors</a></li>
</ul>
</li>

<li><a href='#'>music</a></li>
<li><a href='#'>politics</a></li>
       
</ul>
</div>
</div>

(3) Paste kode ini di pengaturan    

.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}
.menus ul{position:absolute;top:-999em;width:100%}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-primary-wrap{padding:0;position:relative;height:40px;z-index:400;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMDMYJitU6_TegE65Nm7rrTuTPiEb8JyMOwmtpNXGS0w-f9rvf9hHNoJj-ob-d0-IAuVAB6HL1Y_gTI9t85u77ikgHEc72accXzaY8Lttf-uB6ouyNdDCc_x5tkVBGZcr1GG8ymPQ25wA/s0/menu-primary-bg.png) left top repeat-x}
.menu-primary{}
.menu-primary ul{min-width:160px}
.menu-primary li a{color:#383838;padding:15px 15px 14px 15px;margin-right:6px;text-decoration:none;font:11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.menu-primary li a:hover,.menu-primary li a:active,.menu-primary li a:focus,.menu-primary li:hover &gt; a,.menu-primary li.current-cat &gt; a,.menu-primary li.current_page_item &gt; a,.menu-primary li.current-menu-item &gt; a{color:#414141;outline:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMDMYJitU6_TegE65Nm7rrTuTPiEb8JyMOwmtpNXGS0w-f9rvf9hHNoJj-ob-d0-IAuVAB6HL1Y_gTI9t85u77ikgHEc72accXzaY8Lttf-uB6ouyNdDCc_x5tkVBGZcr1GG8ymPQ25wA/s0/menu-primary-bg.png) left -140px repeat-x}
.menu-primary li li a{color:#616060;text-transform:none;background:#EEE;padding:10px 15px;margin:0;font-weight:normal}
.menu-primary li li a:hover,.menu-primary li li a:active,.menu-primary li li a:focus,.menu-primary li li:hover &gt; a,.menu-primary li li.current-cat &gt; a,.menu-primary li li.current_page_item &gt; a,.menu-primary li li.current-menu-item &gt; a{color:#FFF;background:#707070;outline:0}
.menu-primary a.sf-with-ul{padding-right:30px;min-width:1px}
.menu-primary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:14px 18px 0 0}
.menu-primary li li .sf-sub-indicator{padding:8px 15px 0 0}
.menu-primary-wrap .sf-shadow ul{background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQXDlmUmBGzfLeuR_QNPqM0LyPc9aRGp4x_RkGx1xzEde2f58I43ovHdS-D5iC4HKcGTkn8UGfAMBhyphenhyphen_8Efy0kWugwGnNdaBxMa8lg1ToknJ80GEiV6bpmPoM5Idk9FYmYMvSNUwJMxzY/s0/menu-primary-shadow.png&#39;) no-repeat bottom right}
.menu-secondary-wrap{padding:0;margin:0;position:relative;height:40px;z-index:300;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG9SO-cUEsmJzZXiLZMbVffQ9Q_b81Ffys5VhkTrP4zKRCKhDt11aa-2tZpeUlYxrUtr3z7riBUYkCs0PoTL5tOBXsW3B2rPdD2kJlzwi7kHwsQa6Sxpf49n5GD3oY_RnNbCxWT7ALUuI/s0/menu-secondary-bg.png) left top repeat-x}
.menu-secondary{height:40px}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#FFF;padding:14px 15px 11px 15px;text-decoration:none;text-transform:uppercase;text-shadow:0 1px 0 #444;font:bold 12px Arial,Helvetica,Sans-serif}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover &gt; a,.menu-secondary li.current-cat &gt; a,.menu-secondary li.current_page_item &gt; a,.menu-secondary li.current-menu-item &gt; a{color:#FFF;text-shadow:0 1px 0 #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG9SO-cUEsmJzZXiLZMbVffQ9Q_b81Ffys5VhkTrP4zKRCKhDt11aa-2tZpeUlYxrUtr3z7riBUYkCs0PoTL5tOBXsW3B2rPdD2kJlzwi7kHwsQa6Sxpf49n5GD3oY_RnNbCxWT7ALUuI/s0/menu-secondary-bg.png) left -140px repeat-x;outline:0}
.menu-secondary li li a{color:#FFF;background:#3E3E3E;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover &gt; a,.menu-secondary li li.current-cat &gt; a,.menu-secondary li li.current_page_item &gt; a,.menu-secondary li li.current-menu-item &gt; a{color:#FFF;background:#4E4E4E;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:12px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:6px 13px 0 0}
.menu-secondary-wrap .sf-shadow ul{background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDRM7JN6qg4AYYAMrwJpnujia-1K41_Nhwy_Px-r21W96lVLCKvFdag5V9Dif3H5bzj2-7gcPia4Un1kEpJ29fGQRPV8NAr_Jig1hYPGD0yn8_FRHMpv3awjnpOaPs74orWijJfZng1Ak/s0/menu-secondary-shadow.png&#39;) no-repeat bottom right}

diambil dari template "NewsMojo" dari btemplates,com