Cara penerapan menu tersebut pada blog

Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

.menuholder {
    float:left;
    font:normal bold 11px/35px verdana, sans-serif;
    overflow:hidden;
    position:absolute;
    position:fixed;
    top:14px;
    left:0;
}
.menuholder .shadow {
    -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);
    
    box-shadow:0 0 20px rgba(0, 0, 0, 1);
    height:20px;
    left:5%;
    position:absolute;
    top:-9px;
    width:90%;
    z-index:100;
}
.menuholder .back {
    -moz-transition-duration:.4s;
    -o-transition-duration:.4s;
    -webkit-transition-duration:.4s;
    background-color:rgba(0, 0, 0, 0.5);
    height:0;
    width:100%;
}
.menuholder:hover div.back {
    height:650px;
-moz-border-radius:3px;
    -webkit-border-radius:3px;
}
ul.menu {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0 125px;
    position:relative;
}
ul.menu li {
    float:left;
    margin:0 5px 0 0;
}
ul.menu li > a {
    -moz-border-radius:0 0 10px 10px;
    -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -moz-transition:all 0.2s ease-in-out;
    -o-border-radius:0 0 10px 10px;
    -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -o-transition:all 0.2s ease-in-out;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    -webkit-transition:all 0.2s ease-in-out;
    border-radius:0 0 10px 10px;
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
    
    display:block;
    padding:0 10px;
    text-decoration:none;
    transition:all 0.2s ease-in-out;
}
ul.menu li a.red {
    background:#a00;
}
ul.menu li a.orange {
    background:#da0;
}
ul.menu li a.yellow {
    background:#aa0;
}
ul.menu li a.green {
    background:#060;
}
ul.menu li a.blue {
    background:#00a;
}
ul.menu li a.violet {
    background:#682bc2;
}
.menu li div.subs {
    left:0;
    overflow:hidden;
    position:absolute;
    top:35px;
    width:0;
}
.menu li div.subs dl {
    -moz-transition-duration:.2s;
    -o-transition-duration:.2s;
    -webkit-transition-duration:.2s;
    float:left;
    margin:0 130px 0 0;
    overflow:hidden;
    padding:40px 0 5% 2%;
    width:0;
}
.menu dt {
    color:#fc0;
    font-family:arial, sans-serif;
    font-size:12px;
    font-weight:700;
    height:20px;
    line-height:20px;
    margin:0;
    padding:0 0 0 10px;
    white-space:nowrap;
}
.menu dd {
    margin:0;
    padding:0;
    text-align:left;
}
.menu dd a {
    background:transparent;
    color:#fff;
    font-size:12px;
    height:20px;
    line-height:20px;
    padding:0 0 0 10px;
    text-align:left;
    white-space:nowrap;
    width:80px;
}
.menu dd a:hover {
    color:#fc0;
}
.menu li:hover div.subs dl {
    -moz-transition-delay:0.2s;
    -o-transition-delay:0.2s;
    -webkit-transition-delay:0.2s;
    margin-right:2%;
    width:30%;
}
ul.menu li:hover > a,ul.menu li > a:hover {
    background:#aaa;
    color:#fff;
    padding:10px 10px 0;
}
ul.menu li a.red:hover,ul.menu li:hover a.red {
    background:#c00;
}
ul.menu li a.orange:hover,ul.menu li:hover a.orange {
    background:#fc0;
}
ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
    background:#cc0;
}
ul.menu li a.green:hover,ul.menu li:hover a.green {
    background:#080;
}
ul.menu li a.blue:hover,ul.menu li:hover a.blue {
    background:#00c;
}
ul.menu li a.violet:hover,ul.menu li:hover a.violet {
background:#8a2be2;
}
.menu li:hover div.subs,.menu li a:hover div.subs {
    width:100%;
}

Kemudian salin kode di bawah ini dan simpan pada widget HTML/JavaScript blog anda.

<div class='menuholder'>
    <ul class='menu slide'>
        <li><a class='red' href='/'>Home</a>
        </li>
        <li><a class='orange' href='#'>Tutorials</a>
            <div class='subs'>
                <dl>

<dt>Blogging</dt>
                    <dd><a href='#'>Membuat Blog</a>
                    </dd>
                    <dd><a href='#'>Menu Melayang</a>
                    </dd>
                    <dd><a href='#'>Redirect URL</a>
                    </dd>
                    <dd><a href='#'>Link Share</a>
                    </dd>
                    <dd><a href='#'>Fav Icon</a>
                    </dd>
                    <dd><a href='#'>Iklan Di Postingan</a>
                    </dd>
                    <dd><a href='#'>Twitter+Facebook</a>
                    </dd>
                    <dd><a href='#'>Text Area</a>
                    </dd>
                    <dd><a href='#'>Dua Kolom Label</a>
                    </dd>
                    <dd><a href='#'>Page Navigasi</a>
                    </dd>
                    <dd><a href='#'>Readmore Thumbail</a>
                    </dd>
                    <dd><a href='#'>Menambah Gadget</a>
                    </dd>
                    <dd><a href='#'>WordPress Tutorial </a>
                    </dd>
                    <dd><a href='#'>Breadcum Blogger</a>
                    </dd>
                    <dd><a href='#'>Panduan Blogger</a>
                    </dd>
                    <dd><a href='#'>Related Post</a>
                    </dd>
                </dl>
                <dl>

<dt>CSS</dt>
                    <dd><a href='#'>According Slide</a>
                    </dd>
                    <dd><a href='#'>SiteMap According</a>
                    </dd>
                    <dd><a href='#'>Animasi Post</a>
                    </dd>
                    <dd><a href='#'>Button Style</a>
                    </dd>
                    <dd><a href='#'>BackGround Blogspot</a>
                    </dd>
                    <dd><a href='#'>CSS&Jquery</a>
                    </dd>
                    <dd><a href='#'>Rounded Corner</a>
                    </dd>
                    <dd><a href='#'>Menu Horizontal</a>
                    </dd>
                    <dd><a href='#'>CSS Hover</a>
                    </dd>
                    <dd><a href='#'>CSS Diamond</a>
                    </dd>
                    <dd><a href='#'>CSS3 Gradient</a>
                    </dd>
                    <dd><a href='#'>CSS3 Maker</a>
                    </dd>
                    <dd><a href='#'>CSS Search</a>
                    </dd>
                    <dd><a href='#'>CSS Subscribe</a>
                    </dd>
                </dl>
            </div>
        </li>
        <li><a class='yellow' href='#'>Plus++</a>
            <div class='subs'>
                <dl>

<dt>SEO</dt>
                    <dd><a href='#'>Tentang Seo</a>
                    </dd>
                    <dd><a href='#'>Alexa  Trafick</a>
                    </dd>
                    <dd><a href='#'>Cek Page Rank</a>
                    </dd>
                    <dd><a href='#'>Optimasi Blog</a>
                    </dd>
                    <dd><a href='#'>Iweb Tools</a>
                    </dd>
                    <dd><a href='#'>Meta Tag</a>
                    </dd>
                    <dd><a href='#'>Google Webmaster</a>
                    </dd>
                    <dd><a href='#'>Submit Demoz</a>
                    </dd>
                    <dd><a href='#'>Submit Yahoo</a>
                    </dd>
                    <dd><a href='#'>Optimalisasi Gambar</a>
                    </dd>
                    <dd><a href='#'>Meningkatkan PR</a>
                    </dd>
                </dl>
                <dl>

<dt>Gadget</dt>
                    <dd><a href='#'>Buku Tamu</a>
                    </dd>
                    <dd><a href='#'>Float Bookmark</a>
                    </dd>
                    <dd><a href='#'>MP3 Di Blog</a>
                    </dd>
                    <dd><a href='#'>Opy Yahoo</a>
                    </dd>
                    <dd><a href='#'>Translate Flag</a>
                    </dd>
                    <dd><a href='#'>Alexa Gadget</a>
                    </dd>
                    <dd><a href='#'>Gadget Interaktif</a>
                    </dd>
                </dl>
            </div>
        </li>
        <li><a class='green' href='#'>About</a>
            <div class='subs'>
                <dl>
                    <dd><a href='#'>FORUM</a>
                    </dd>
                    <dd><a href='#'>Site Map</a>
                    </dd>
                    <dd><a href='#'>About Me</a>
                    </dd>
                    <dd><a href='#'>FB Comunity</a>
                    </dd>
                    <dd><a href='#'>Twitter</a>

                    </dd>
                    <dd><a href='#'>My History</a>
                    </dd>
                    <dd><a href='#'>Gallery Photo</a>
                    </dd>
                </dl>
            </div>
        </li>
    </ul>
    <div class='back'></div>
</div>