CARA MEMBUAT MENU HORIZONTAL DROP DOWN

Mungkin kalian sudah baca tutorial blog di blogger-blogger lainy

saya akan menjelaskan cara membuat MENU HORIZONTAL DROP DOWN !

1) Copy code HTML dibawah 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='#'>Home</a>

                </li>

                <li>

                  <a href='#'>Tentang Saya</a>

                </li>

                <li>

                  <a href='#'>Contact</a>

                     <ul>

                        <li><a href='#'>Sub Halaman 1</a></li>

                        <li><a href='#'>Sub Halaman 2</a></li>

                        <li><a href='#'>Sub Halaman 3</a></li>

                      </ul>

                </li>

                <li>

                  <a href='#'>Daftar Isi ▼</a>                 <ul> 

                    <li><a href='#'>Sub Menu 1</a></li> 

                    <li><a href='#'>Sub Menu 2</a></li> 

                    <li><a href='#'>Sub Menu 3</a> 

                   <ul> 

                    <li><a href='#'>Sub Sub Menu 1</a></li> 

                    <li><a href='#'>Sub Sub Menu 2</a></li> 

                    <li><a href='#'>Sub Sub Menu 3</a></li> 

                  </ul> 

                  </li> 

                  </ul>             </li>

          </ul> 

        </div>

2) Yang bertanda ( # ) MERAH diganti URL yang ingin di tuju

      Dan yang bertanda UNGU di ganti dengan nama yang akan muncul menjadi menu nya

3) peratama KLIK TATA LETAK 

    kedua pilih EDIT dan pilih HTML / JAVASCRIPT lalu masukan code HTML yang di copy lalu PILIH SIMPAN 

sebelum kalian semua mencopy Comentar dulu ya , itu sangat menghargai saya