MEMBUAT MENU DROP DOWN DENGAN TATA LETAK SAJA

 

 

 

 

 

 

Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget > pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan lupa saat menambahkan gadget, pilih gadget yang di bawah header.)

Copy Code Script di Bawah ini

 

<style>
        #menunavigasihorisontal {
            background: #848484;
            width: 100%;
            color: #FFF;
                margin: 10px 0;
                padding: 0;
                position: relative;
                border-top:0px solid #960100;
                height:35px; }
        #bb2nav {
            margin: 0;
            padding: 0;}
        #bb2nav ul {
            float: left;
            list-style: none;
            margin: 0;
            padding: 0;}
        #bb2navli {
            list-style: none;
            margin: 0;
            padding: 0;}
        #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
            color: #FFF;
            display: block;
           font:bold 12px Helvetica, sans-serif;
           margin: 0;
            padding: 9px 12px 11px 12px;
                text-decoration: none;
                border-right:0px solid #627AAD;}
        #bb2nav li a:hover, #bb2nav li a:active {
            background: #2E9AFE;
            color: #FFF;
            display: block;
            text-decoration: none;
                margin: 0;
            padding: 9px 12px 11px 12px;}
        #bb2nav li {
            float: left;
            padding: 0;}
        #bb2nav li ul {
            z-index: 9999;
            position: absolute;
            left: -999em;
            height: auto;
            width: 160px;
            margin: 0;
            padding: 0;}
        #bb2nav li ul a {
            width: 140px;}
        #bb2nav li ul ul {
            margin: -25px 0 0 161px;}
        #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
    li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
            left: -999em;}
        #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
    li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
    li li li.sfhover ul {
            left: auto;}
        #bb2nav li:hover, #bb2nav li.sfhover {
            position: static;}
        #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
            background: #EDEFF4;
            width: 120px;
            color: #3B5998;
            display: block;
            font:normal 12px Helvetica, sans-serif;
            margin: 1px 0 0 0;
            padding: 9px 12px 10px 12px;
                text-decoration: none;
        z-index:9999;
        border:1px solid #ddd;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;}
        #bb2nav li li a:hover, #bb2nav li li a:active {
            background: #627AAD;
            color: #FFF;
            display: block;}
        #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
    a:visited {
            background: #EDEFF4;
            width: 120px;
            color: #3B5998;
            display: block;
            font:normal 12px Helvetica, sans-serif;
            padding: 9px 12px 10px 12px;
                text-decoration: none;
        z-index:9999;
        border:1px solid #ddd;
            margin: 1px 0 0  -14px;}
        #bb2nav li li li a:hover, #bb2nav li li li a:active {
            background: #627AAD;
            color: #FFF;
            display: block;}
</style>
<div id='menunavigasihorisontal'>
    <ul id='bb2nav'>
        <li>
            <a href='URL SOBAT'>Daftar Isi</a>
        </li>
        <li>
            <a href='URL SOBAT'>Tentang Saya</a>
        </li>
        <li>
            <a href='#'>Menu ▼</a>
            <ul>
                <li>
                    <a href='URL SOBAT'>Sub Menu 1</a>
                </li>
                <li>
                    <a href='URL SOBAT'>Sub Menu 2</a>
                </li>
                <li>
                    <a href='URL SOBAT'>Sub Menu 3</a>
                    <li>
                        <a href='URL SOBAT'>Sub Menu 4</a>
                    </li>
                    <li>
                        <a href='URL SOBAT'>Sub Menu 5</a>
                    </li>
                    <li>
                        <a href='URL SOBAT'>Sub Menu 6</a>
                    </li>
                </li>
            </ul>
        </li>
    </ul>
</div>