Tangan Kanan Boss

Selamat Datang di blog sederhana saya,Semoga apa yang Kalian Inginkan dapat terpenuhi disini.

Review: Remix OS Masa Depan Komputer Ada Disini

, No comments

Apa yang kamu rasakan ketika menjalankan OS Android didalam komputermu menggunakan virtual machine seperti bluestack, nox ataupun emulator lainnya? Terasa sangat berat? Lelet? Atau malah tidak bisa berjalan (crash) dikarenakan prosesor ataupun ram komputermu tidak memadai? Well, mungkin artikel ini cocok untuk kamu yang suka menggunakan OS android didalam komputer, baik untuk bermain games ataupun sekedar melakukan hal-hal biasa.

Seperti yang sudah saya singgung sebelumnya, ketika kita menggunakan sebuah virtual machine/emulator didalam komputer kita, pasti akan berjalan dengan lambat ataupun tidak berjalan seperti pada perangkat aslinya, tetapi hal ini tidak akan terjadi pada Remix OS, karena Remix OS adalah sebuah Operating System Android yang dapat dijalankan didalam komputer kita, karena ini adalah Operating System dan bukan emulator, jadi Remix OS tidak terlalu berat dan terlalu memakan resource komputer kita seperti kita menggunakan emulator android pada biasanya.
Baiklah langsung saja kita review Remix OS ini.

BACA: CARA MENGINSTALL REMIX OS DI LINUX UBUNTU

Tentang Remix OS

Remix OS adalah sebuah Operating System Android yang dibuat oleh sebuah kelompok bernama Jide. Jide merupakan kelompok yang dibentuk oleh 3 mantan pekerja Google yaitu Jeremy Chau, Ben Luk dan David ko. Tujuan mereka dalam membuat Remix OS adalah karena mereka sadar bahwa Android adalah OS yang sangat banyak digunakan oleh semua orang didunia, baik digunakan didalam smartphone, TV,  dan jam tangan, tetapi Android belum tersedia untuk PC atau komputer sehingga munculah ide untuk membuat Remix OS. Silahkan baca disini untuk info lebih lanjut.

Interface


Interface yang ditawarkan sangatlah unik karena kita tidak seperti sedang menjalankan sebuah android melainkan seperti sedang menjalankan OS PC pada umumnya (Linux/Windows) dimana terdapat Start menu, taskbar, beberapa icon disebelah kanan seperti wifi, baterai, sound, jam dan tanggal, dan bluetooth. Tetapi hal yang paling menarik bagian itu adalah  sebuah notification yang mirip dengan Windows 10 yang didalamnya terdapat tool untuk screenshot, membuka pengaturan dan menyembunyikan taskbar.


Tidak hanya taskbar yang biasanya kita temui di OS windows/linux, file manager dalam Remix OS juga mirip seperti OS yang biasanya kita gunakan. Folder Dokumen, Gambar, Musik, Film, Download dan Desktop berada dibagian kiri. Kemudian ada folder My Remix yaitu folder tempat dimana penyimpanan file android berada atau jika disamakan dengan OS PC maka itu seperti partisi ataupun localdisk.

Berat gak sih?
Well, seperti yang sudah saya bilang sebelumnya, Remix OS bukanlah emulator jadi jelas saja tidak berat, walaupun awalnya saya kira Remix OS ini cukup berat tetapi ternyata Remix OS berjalan cukup ringan, saya dapat multitasking dengan mudah, membuka banyak aplikasi dengan mudah dan tidak ada eror dengan aplikasi ataupun eror yang lainnya. Bahkan transisi saat kita membuka aplikasi terasa smooth seperti layaknya pada android kekinian (lolipop/marsmallow).

Fitur



Remix OS menawarkan pengalaman menggunakan Android tetapi tetap bisa melakukan hal yang biasanya kita lakukan didalam OS PC seperti menggunakan sortcut pada keyboard untuk mencopy(ctrl+c), memotong (ctrl+x), menyeleksi semua file (ctrl+a) maupun membuka start menu menggunakan tombol windows. note: fitur ini tidak dapat digunakan dibeberapa aplikasi. Selain sortcut, kita juga dapat menyeleksi file ataupun aplikasi yang ada didalam desktop seperti kita menggunakan mouse pada umumnya, drag and drop untuk memindahkan atau mencopy file.

Ada beberapa fitur baru di Remix OS versi 3 yang pertama adalah Play activator, jika pada versi sebelumnya kita tidak disediakan Google Play maka pada versi ini kita dapat menginstall Google Play hanya dengan membuka Play Activator kemudian aktifkan Google Play.Fitur baru yang kedua adalah pre-rooted, jadi kita tidak perlu me-root Remix OS karena Remix OS sudah diroot dari bawaannya dan menurut saya ini sangatlah bagus. Dan yang ketiga adalah Remix OS versi 3 menggunakan Android 6.0 atau Marshmallow.

Gaming
Awal saya menginstal Remix OS, saya tidak tau bahwa ternyata Remix OS versi 3 (versi terbaru yang saya install) ternyata sudah support dengan keymapping, kita dapat mengaktifkannya didalam Setting > Experiental Feature > Key Mapping. Dengan fitur ini, kita dapat memainkan gim(game) apa saja dengan menggunakan keyboard. Untuk mengatur mapping pada gim(game) kita mainkan, cukup buka gim(game) tersebut kemudian klik tombol pad yang ada dibagian kanan kemudian kita bisa memilih dan memasukkan tombol.

Bisakah menggunakan Gamepad?

Saya sudah mencoba berbagai macam aplikasi yang berfungsi untuk melakukan mapping pada gamepad  seperti tincore keymapper, sixasix control dan usb/bt joy control tetapi tidak berhasil, mungkin jika ada aplikasi seperti joytokey yang ada didalam Windows saya rasa kita dapat menggunakan gamepad.

Minimum Requirement

Jujur saja saya tidak dapat menemukan minimum requirement didalam situs official Remix OS, tetapi saya sarankan bagi kamu yang ingin menginstal Remix OS minimal memiliki ram 2 gigabyte dan rekomendasi saya 4 gigabyte atau lebih. Untuk masalah cpu saya kira tidak ada masalah, karena saya sendiri menginstal Remix OS menggunakan cpu yang tergolong kedalam spesifikasi rendah yaitu Intel Celeron 1.3 ghz tetapi Remix OS dapat berjalan dengan lancar dan smooth. Bagi kamu yang penasaran apakah Laptopmu bisa digunakan untuk menginstal Remix OS silahkan buka forum XDA-Developers Remix OS disini.

Demikian sedikit review saya tentang Remix OS yang luar biasa ini, semoga kamu tertarik untuk mencoba dan menggunakannya. Dengan tampilan yang menarik, fitur yang sama seperti OS PC tetapi memiliki banyak aplikasi dan gim yang sangat menarik saya rasa OS ini cocok sebagai OS dalam penggunaan sehari-hari. Sekian review dari saya, terima kasih. (review ini adalah review pertama saya, mohon beritahu jika terdapat kesalahan pada artikel ini).

OFFICIAL SITE : JIDE
Share:
Read More

Panduan Cara Install XAMPP diUbuntu

No comments


XAMPP adalah sebuah aplikasi gratis dan open source yang dibuat oleh Apache Friend. XAMPP biasanya digunakan untuk web development atau mengerjakan sesuatu didalam area kerja yang menggunakan server dan database.

Banyak sekali orang yang menggunakan XAMPP karena didalam XAMPP tersebut sudah berisi dengan aplikasi-aplikasi web development seperti Apache dan MySQL.

Keuntungan menggunakan XAMPP ini adalah kita dapat menjalankan server (localhost) langsung dari komputer kita dan tanpa koneksi internet sehingga dapat menghemat biaya dan waktu.

Selain itu didalam XAMPP juga tersedia bundle CMS(Content Management System) seperti Wordpress, Joomla dan drupal, bundle tersebut bisa kita download di bitnami.org

Pada panduan kali ini saya akan mencoba menjelaskan satu-persatu tahapan dalam menginstall XAMPP didalam Operating System Ubuntu dan keluarganya.
  • Download XAMPP di www.apachefriends.org kemudian pilih XAMPP for Linux setelah itu save file XAMPP tersebut didalam folder Downloads.


    • Setelah kamu selesai mendownload file installer XAMPP tersebut, kita akan masuk ke folder download dengan cara membuka terminal dengan menekan tombol ctrl+alt+t kemudian ketikkan command dibawah kemudian enter.
    cd /home/usernamekamu/Downloads



    • Setelah itu kita akan mengubah permission dari file XAMPP tersebut dengan mengetik command dibawah kemudian enter.
    chmod +x namafilexamppkamu.run




    • Setelah kita mengubah permission installer xampp kita, jalankan installer xampp dengan mengetik command dibawah kemudian masukkan password dan enter.
    sudo ./namafilexamppkamu.run




    • Setelah itu maka akan muncul GUI installer XAMPP, silahkan install seperti biasa.
     

    • Setelah selesai menginstal XAMPP, kita dapat menjalankan XAMPP control panel dengan menggunakan command sudo /opt/lampp/manager-linux-x64.run didalam terminal, atau kita juga bisa membuat GUI sehingga kita tidak perlu mengetikkan command dengan cara dibawah ini.


      Membuat GUI XAMPP Control Panel

      • Buka terminal dan masukkan command seperti dibawah ini, masukkan password kemudian enter.
      sudo gedit ~/.local/share/applications/xampp-control-panel.desktop


       

      • Kemudian akan muncul Text Editor yang tidak ada isinya, isi Text Editor tersebut dengan teks dibawah ini, setelah selesai simpan file dan tutup teks editornya.
      [Desktop Entry]
      Encoding=UTF-8
      Name=Xampp Control Panel
      Comment=Start or Stop XAMPP
      Exec=gksudo python /opt/lampp/share/xampp-control-panel/xampp-control-panel.py
      Icon=/opt/lampp/htdocs/favicon.ico
      Categories=Application;Development;Web
      Version=1.0
      Type=Application
      Terminal=0




      • Sekarang kita sudah dapat membuka GUI dari XAMPP Control Panel dari menu.


        Share:
        Read More

        Cara Memasang Menu Drop Down Simple dan Menarik tanpa Edit HTML

        , , , No comments
        Menu Drop Down dalam sebuah situs atau blog bisa dikatakan sangat penting atau wajib demi meningkatkan efektifitas navigasi atau arahan pengunjung yang ada dalam blog. Menu tersebut berisi informasi penting dan gambaran keseluruhan atau tentang apa yang dibahas didalam blog tersebut.maka dari itu Menu Drop Down dirasa perlu,karena kalau tidak ada  Menu Drop Down orang merasa bingung dengan metode pembuatan menu drop down yang harus melalui Edit HTML yang begitu merepotkan untuk diedit jika ada yang mau diubah atau ditambahkan.

        Menjawab permasalahan itu, kami menyediakan beberapa Menu Drop Down keren tanpa harus melaui Edit HTML atau Edit Template yang bisa membuat Template blog kita beresiko tak terbaca. Maka dari itu, tanpa panjang lebar kita sebaiknya langsung saja menuju petunjuk pembuatannya.

        Masuk Blogger > pilih Tata Letak

        Klik Add a Gadget atau Add a Page element

        Pilih HTML/JavaScript widget

        Paste semua kode Menu Drop Down tersebut dalam HTML/JavaScript widget (Kodenya ada dibawah dan silahkan pilih sesuai keinginan)

        Klik Save

        Kemudian drag atau geser HTML/JavaScript widget tersebut dan letakkan tepat dibawah header / judul Blog

        Berikut daftar Kode Menu Drop Down:

        1. Menu Drop Down


        Kode:


        <style>

        #cssmenu ul,
        #cssmenu li,
        #cssmenu span,
        #cssmenu a {
          margin: 0;
          padding: 0;
          position: relative;
        }
        #cssmenu {
          height: 49px;
          border-radius: 5px 5px 0 0;
          -moz-border-radius: 5px 5px 0 0;
          -webkit-border-radius: 5px 5px 0 0;
          background: #141414;
          background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
          background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
          background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
          background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
          background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
          filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
          border-bottom: 2px solid #e00f16;
        }
        #cssmenu:after,
        #cssmenu ul:after {
          content: '';
          display: block;
          clear: both;
        }
        #cssmenu a {
          background: #141414;
          background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
          background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
          background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
          background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
          background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
          filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
          color: #ffffff;
          display: inline-block;
          font-family: Helvetica, Arial, Verdana, sans-serif;
          font-size: 12px;
          line-height: 49px;
          padding: 0 20px;
          text-decoration: none;
        }
        #cssmenu ul {
          list-style: none;
        }
        #cssmenu > ul {
          float: left;
        }
        #cssmenu > ul > li {
          float: left;
        }
        #cssmenu > ul > li:hover:after {
          content: '';
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          left: 50%;
          bottom: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid #e00f16;
          margin-left: -10px;
        }
        #cssmenu > ul > li:first-child > a {
          border-radius: 5px 0 0 0;
          -moz-border-radius: 5px 0 0 0;
          -webkit-border-radius: 5px 0 0 0;
        }
        #cssmenu > ul > li:last-child > a {
          border-radius: 0 5px 0 0;
          -moz-border-radius: 0 5px 0 0;
          -webkit-border-radius: 0 5px 0 0;
        }
        #cssmenu > ul > li.active > a {
          box-shadow: inset 0 0 3px #000000;
          -moz-box-shadow: inset 0 0 3px #000000;
          -webkit-box-shadow: inset 0 0 3px #000000;
          background: #070707;
          background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
          background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
          background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
          background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
          background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
          filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
        }
        #cssmenu > ul > li:hover > a {
          background: #070707;
          background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
          background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
          background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
          background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
          background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
          filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
          box-shadow: inset 0 0 3px #000000;
          -moz-box-shadow: inset 0 0 3px #000000;
          -webkit-box-shadow: inset 0 0 3px #000000;
        }
        #cssmenu .has-sub {
          z-index: 1;
        }
        #cssmenu .has-sub:hover > ul {
          display: block;
        }
        #cssmenu .has-sub ul {
          display: none;
          position: absolute;
          width: 200px;
          top: 100%;
          left: 0;
        }
        #cssmenu .has-sub ul li {
          *margin-bottom: -1px;
        }
        #cssmenu .has-sub ul li a {
          background: #e00f16;
          border-bottom: 1px dotted #ec6f73;
          filter: none;
          font-size: 11px;
          display: block;
          line-height: 120%;
          padding: 10px;
        }
        #cssmenu .has-sub ul li:hover a {
          background: #b00c11;
        }
        #cssmenu .has-sub .has-sub:hover > ul {
          display: block;
        }
        #cssmenu .has-sub .has-sub ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
        }
        #cssmenu .has-sub .has-sub ul li a {
          background: #b00c11;
          border-bottom: 1px dotted #d06d70;
        }
        #cssmenu .has-sub .has-sub ul li a:hover {
          background: #80090d;
        }


        </style>
        <div id='cssmenu'>
        <ul>
           <li class='active '><a href='index.html'><span>Home</span></a></li>
           <li class='has-sub '><a href='#'><span>Products</span></a>
              <ul>
                 <li class='has-sub '><a href='#'><span>Product 1</span></a>
                    <ul>
                       <li><a href='#'><span>Sub Item</span></a></li>
                       <li><a href='#'><span>Sub Item</span></a></li>
                    </ul>
                 </li>
                 <li class='has-sub '><a href='#'><span>Product 2</span></a>
                    <ul>
                       <li><a href='#'><span>Sub Item</span></a></li>
                       <li><a href='#'><span>Sub Item</span></a></li>
                    </ul>
                 </li>
              </ul>
           </li>
           <li><a href='#'><span>About</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>
        </div>

        2. Menu Drop Down


        Kode:


        <style>
        #cssmenu ul,
        #cssmenu li,
        #cssmenu span,
        #cssmenu a {
          margin: 0;
          padding: 0;
          position: relative;
        }
        #cssmenu {
          height: 49px;
          border-radius: 5px 5px 0 0;
          -moz-border-radius: 5px 5px 0 0;
          -webkit-border-radius: 5px 5px 0 0;
          background: #141414;
          background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
          background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
          background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
          background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
          background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
          filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
          border-bottom: 2px solid #0fa1e0;
        }
        #cssmenu:after,
        #cssmenu ul:after {
          content: '';
          display: block;
          clear: both;
        }
        #cssmenu a {
          background: #141414;
          background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
          background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
          background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
          background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
          background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
          filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
          color: #ffffff;
          display: inline-block;
          font-family: Helvetica, Arial, Verdana, sans-serif;
          font-size: 12px;
          line-height: 49px;
          padding: 0 20px;
          text-decoration: none;
        }
        #cssmenu ul {
          list-style: none;
        }
        #cssmenu > ul {
          float: left;
        }
        #cssmenu > ul > li {
          float: left;
        }
        #cssmenu > ul > li:hover:after {
          content: '';
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          left: 50%;
          bottom: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid #0fa1e0;
          margin-left: -10px;
        }
        #cssmenu > ul > li:first-child > a {
          border-radius: 5px 0 0 0;
          -moz-border-radius: 5px 0 0 0;
          -webkit-border-radius: 5px 0 0 0;
        }
        #cssmenu > ul > li:last-child > a {
          border-radius: 0 5px 0 0;
          -moz-border-radius: 0 5px 0 0;
          -webkit-border-radius: 0 5px 0 0;
        }
        #cssmenu > ul > li.active > a {
          box-shadow: inset 0 0 3px #000000;
          -moz-box-shadow: inset 0 0 3px #000000;
          -webkit-box-shadow: inset 0 0 3px #000000;
          background: #070707;
          background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
          background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
          background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
          background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
          background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
          filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
        }
        #cssmenu > ul > li:hover > a {
          background: #070707;
          background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
          background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
          background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
          background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
          background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
          filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
          box-shadow: inset 0 0 3px #000000;
          -moz-box-shadow: inset 0 0 3px #000000;
          -webkit-box-shadow: inset 0 0 3px #000000;
        }
        #cssmenu .has-sub {
          z-index: 1;
        }
        #cssmenu .has-sub:hover > ul {
          display: block;
        }
        #cssmenu .has-sub ul {
          display: none;
          position: absolute;
          width: 200px;
          top: 100%;
          left: 0;
        }
        #cssmenu .has-sub ul li {
          *margin-bottom: -1px;
        }
        #cssmenu .has-sub ul li a {
          background: #0fa1e0;
          border-bottom: 1px dotted #6fc7ec;
          filter: none;
          font-size: 11px;
          display: block;
          line-height: 120%;
          padding: 10px;
        }
        #cssmenu .has-sub ul li:hover a {
          background: #0c7fb0;
        }
        #cssmenu .has-sub .has-sub:hover > ul {
          display: block;
        }
        #cssmenu .has-sub .has-sub ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
        }
        #cssmenu .has-sub .has-sub ul li a {
          background: #0c7fb0;
          border-bottom: 1px dotted #6db2d0;
        }
        #cssmenu .has-sub .has-sub ul li a:hover {
          background: #095c80;
        }
        </style>
        <div id='cssmenu'>
        <ul>
           <li class='active '><a href='index.html'><span>Home</span></a></li>
           <li class='has-sub '><a href='#'><span>Products</span></a>
              <ul>
                 <li class='has-sub '><a href='#'><span>Product 1</span></a>
                    <ul>
                       <li><a href='#'><span>Sub Item</span></a></li>
                       <li><a href='#'><span>Sub Item</span></a></li>
                    </ul>
                 </li>
                 <li class='has-sub '><a href='#'><span>Product 2</span></a>
                    <ul>
                       <li><a href='#'><span>Sub Item</span></a></li>
                       <li><a href='#'><span>Sub Item</span></a></li>
                    </ul>
                 </li>
              </ul>
           </li>
           <li><a href='#'><span>About</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>
        </div>

        3. Menu Drop Down


        Kode:


        <style>
        #cssmenu ul, #cssmenu li,
        #cssmenu span, #cssmenu a { margin: 0; padding: 0; }

        #cssmenu {
         background: #F6F8EE;
         border-bottom: 1px solid #95AA61;
         box-shadow: inset 0 2px 4px rgba(149, 170, 97, 0.5);
         -moz-box-shadow: inset 0 2px 4px rgba(149, 170, 97, 0.5);
         -webkit-box-shadow: inset 0 2px 4px rgba(149, 170, 97, 0.5);
        }

        #cssmenu:after { content:''; display: block; clear: both; }

        #cssmenu a {
         display: inline-block;
         font-family: Calibri, Arial, sans-serif;
         color: #333; text-decoration: none;
         -webkit-transition: all 0.2s;
         -moz-transition: all 0.2s;
         -o-transition: all 0.2s;
         -ms-transition: all 0.2s;
         transition: all 0.2s;
        }
        #cssmenu a:hover { background: #95AA61; }

        #cssmenu ul {
         list-style: none;
         height: 34px;
         padding: 10px 0;
        }
        #cssmenu > ul > li {
         float: left;
         height: 34px;
         margin: 0 5px;
         position: relative;
        }
        #cssmenu > ul > li > a {
         background: #899752;
         box-shadow: inset 1px 1px 3px rgba(18,19,16,0.2);
         -moz-box-shadow: inset 1px 1px 3px rgba(18,19,16,0.2);
         -webkit-box-shadow: inset 1px 1px 3px rgba(18,19,16,0.2);
         border-radius: 17px;
         -moz-border-radius: 17px;
         -webkit-border-radius: 17px;
         line-height: 24px;
         padding: 5px 10px;
        }
         #cssmenu > ul > li.active a {
          background: #121310;
          color: #F6F8EE;
         }

        #cssmenu .has-sub ul {
         background: #F6F8EE;
         border: 1px solid #95AA61;
         border-top: 0 none;
         height: 0; overflow: hidden;
         padding: 0; position: absolute;
         opacity: 0; top: 44px; left: 0;
         width: 200%;

         -webkit-transition: opacity 0.2s;
         -moz-transition: opacity 0.2s;
         -o-transition: opacity 0.2s;
         -ms-transition: opacity 0.2s;
         transition: opacity 0.2s;
        }
        #cssmenu .has-sub:after {
         content: '';
         display: block;
         padding: 0 10px;
         position: absolute;
         bottom: -10px; left: 0;
         height: 10px; width: 200%;
        }

        #cssmenu .has-sub:hover ul {
         border-radius: 0 0 5px 5px;
         -moz-border-radius: 0 0 5px 5px;
         webkit-border-radius: 0 0 5px 5px;
         height: auto;
         opacity: 1;
         padding: 10px;
        }

        #cssmenu .has-sub li,
        #cssmenu .has-sub li a { padding: 0 5px; width: 100%; }
        #cssmenu .has-sub li { margin: 8px 0; }
        #cssmenu .has-sub li a {
         border-radius: 5px 0 0 5px;
         -moz-border-radius: 5px 0 0 5px;
         -webkit-border-radius: 5px 0 0 5px;
        }
        </style>
        <div id='cssmenu'>
        <ul>
           <li class='active '><a href='index.html'><span>Home</span></a></li>
           <li class='has-sub '><a href='#'><span>Products</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
              </ul>
           </li>
           <li><a href='#'><span>About</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>
        </div>

        4. Menu Drop Down


        Kode:


        <style>
        #cssmenu ul, #cssmenu li,
        #cssmenu span, #cssmenu a { margin: 0; padding: 0; }

        #cssmenu {
         background: #f8f5ee;
         border-bottom: 1px solid #aa9961;
         box-shadow: inset 0 2px 4px rgba(151, 129, 82, 0.5);
         -moz-box-shadow: inset 0 2px 4px rgba(151, 129, 82, 0.5);
         -webkit-box-shadow: inset 0 2px 4px rgba(151, 129, 82, 0.5);
        }

        #cssmenu:after { content:''; display: block; clear: both; }

        #cssmenu a {
         display: inline-block;
         font-family: Calibri, Arial, sans-serif;
         color: #131210; text-decoration: none;
         -webkit-transition: all 0.2s;
         -moz-transition: all 0.2s;
         -o-transition: all 0.2s;
         -ms-transition: all 0.2s;
         transition: all 0.2s;
        }
         #cssmenu a:hover { background: #aa9961; }

        #cssmenu ul {
         list-style: none;
         height: 34px;
         padding: 10px 0;
        }
        #cssmenu > ul > li {
         float: left;
         height: 34px;
         margin: 0 5px;
         position: relative;
        }
        #cssmenu > ul > li > a {
         background: #978152;
         box-shadow: inset 1px 1px 3px rgba(19,18,16,0.2);
         -moz-box-shadow: inset 1px 1px 3px rgba(19,18,16,0.2);
         -webkit-box-shadow: inset 1px 1px 3px rgba(19,18,16,0.2);
         border-radius: 17px;
         -moz-border-radius: 17px;
         -webkit-border-radius: 17px;
         line-height: 24px;
         padding: 5px 10px;
        }
         #cssmenu > ul > li.active a {
          background: #131210;
          color: #f8f5ee;
         }

        #cssmenu .has-sub ul {
         background: #f8f5ee;
         border: 1px solid #aa9961;
         border-top: 0 none;
         height: 0; overflow: hidden;
         padding: 0; position: absolute;
         opacity: 0; top: 44px; left: 0;
         width: 160px;

         -webkit-transition: opacity 0.2s;
         -moz-transition: opacity 0.2s;
         -o-transition: opacity 0.2s;
         -ms-transition: opacity 0.2s;
         transition: opacity 0.2s;
        }
        #cssmenu .has-sub:after {
         content: '';
         display: block;
         padding: 0 10px;
         position: absolute;
         bottom: -10px; left: 0;
         height: 10px; width: 200%;
        }

        #cssmenu .has-sub:hover ul {
         border-radius: 0 0 5px 5px;
         -moz-border-radius: 0 0 5px 5px;
         -webkit-border-radius: 0 0 5px 5px;
         height: auto;
         opacity: 1;
         padding: 10px;
        }

        #cssmenu .has-sub li,
        #cssmenu .has-sub li a { padding: 0 5px; width: 100%; }
        #cssmenu .has-sub li { margin: 8px 0; }
        #cssmenu .has-sub li a {
         border-radius: 5px 0 0 5px;
         -moz-border-radius: 5px 0 0 5px;
         -webkit-border-radius: 5px 0 0 5px;
         line-height: 120%;
        }
        </style>
        <div id='cssmenu'>
        <ul>
           <li class='active '><a href='index.html'><span>Home</span></a></li>
           <li class='has-sub '><a href='#'><span>Products</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
              </ul>
           </li>
           <li><a href='#'><span>About</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>
        </div>

        5. Menu Drop Down


        Kode:


        <style>
        #cssmenu {
         border:1px solid #b9121b;
         background:#b9121b;
         }
        #cssmenu > ul {
         padding:1px 0;
         margin:0px;
         list-style:none;
         width:100%;
         height:21px;
         border-top:1px solid #FFFFFF;
         border-bottom:1px solid #FFFFFF;
         font:normal 8pt verdana, arial, helvetica;
        }
        #cssmenu > ul li {
         margin:0;
         padding:0;
         display:block;
         float:left;
         position:relative;
         width:148px;
        }
        #cssmenu > ul li a:link, #cssmenu > ul li a:visited {
         padding:4px 0;
         display:block;
         text-align:center;
         text-decoration:none;
         background:#b9121b;
         color:#ffffff;
         width:148px;
         height:13px;
        }
        #cssmenu > ul li:hover a, #cssmenu > ul li a:hover, #cssmenu > ul li a:active {
         padding:4px 0;
         display:block;
         text-align:center;
         text-decoration:none;
         background:#ec454e;
         color:#ffffff;
         width:146px;
         height:13px;
         border-left:1px solid #ffffff;
         border-right:1px solid #ffffff;
        }
        #cssmenu > ul li ul {
         margin:0;
         padding:1px 1px 0;
         list-style:none;
         display:none;
         background:#ffffff;
         width:146px;
         position:absolute;
         top:21px;
         left:-1px;
         border:1px solid #b9121b;
         border-top:none;
        }
        #cssmenu > ul li:hover ul {
         display:block;
        }
        #cssmenu > ul li ul li {
         width:146px;
         clear:left;
         width:146px;
        }
        #cssmenu > ul li ul li a:link, #cssmenu > ul li ul li a:visited {
         clear:left;
         background:#b9121b;
         padding:4px 0;
         width:146px;
         border:none;
         border-bottom:1px solid #ffffff;
         position:relative;
         z-index:1000;
        }
        #cssmenu > ul li ul li:hover a, #cssmenu > ul li ul li a:active, #cssmenu > ul li ul li a:hover {
         clear:left;
         background:#ec454e;
         padding:4px 0;
         width:146px;
         border:none;
         border-bottom:1px solid #ffffff;
         position:relative;
         z-index:1000;
        }
        #cssmenu > ul li ul li ul.navigation-3 {
         display:none;
         margin:0;
         padding:0;
         list-style:none;
         position:absolute;
         left:145px;
         top:-2px;
         padding:1px 1px 0 1px;
         border:1px solid #b9121b;
         border-left:1px solid #b9121b;
         background:#ffffff;
         z-index:900;
        }
        #cssmenu > ul li ul li:hover ul.navigation-3 {
         display:block;
        }
        #cssmenu > ul li ul li ul.navigation-3 li a:link, #cssmenu > ul li ul li ul.navigation-3 li a:visited {
         background:#b9121b;
        }
        #cssmenu > ul li ul li ul.navigation-3 li:hover a, #cssmenu > ul li ul li ul.navigation-3 li a:hover, #cssmenu > ul li ul li ul.navigation-3 li a:active {
         background:#ec454e;
        }

        </style>
        <div id='cssmenu'>
        <ul>
           <li class='active '><a href='index.html'><span>Home</span></a></li>
           <li class='has-sub '><a href='#'><span>Products</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
              </ul>
           </li>
           <li><a href='#'><span>About</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>
        </div>

        6. Menu Drop Down


        Kode:


        <style>
        #cssmenu {
         border:1px solid #000099;
         background:#000099;
         }
        #cssmenu > ul {
         padding:1px 0;
         margin:0px;
         list-style:none;
         width:100%;
         height:21px;
         border-top:1px solid #FFFFFF;
         border-bottom:1px solid #FFFFFF;
         font:normal 8pt verdana, arial, helvetica;
        }
        #cssmenu > ul li {
         margin:0;
         padding:0;
         display:block;
         float:left;
         position:relative;
         width:148px;
        }
        #cssmenu > ul li a:link, #cssmenu > ul li a:visited {
         padding:4px 0;
         display:block;
         text-align:center;
         text-decoration:none;
         background:#000099;
         color:#ffffff;
         width:148px;
         height:13px;
        }
        #cssmenu > ul li:hover a, #cssmenu > ul li a:hover, #cssmenu > ul li a:active {
         padding:4px 0;
         display:block;
         text-align:center;
         text-decoration:none;
         background:#0066FF;
         color:#ffffff;
         width:146px;
         height:13px;
         border-left:1px solid #ffffff;
         border-right:1px solid #ffffff;
        }
        #cssmenu > ul li ul {
         margin:0;
         padding:1px 1px 0;
         list-style:none;
         display:none;
         background:#ffffff;
         width:146px;
         position:absolute;
         top:21px;
         left:-1px;
         border:1px solid #000099;
         border-top:none;
        }
        #cssmenu > ul li:hover ul {
         display:block;
        }
        #cssmenu > ul li ul li {
         width:146px;
         clear:left;
         width:146px;
        }
        #cssmenu > ul li ul li a:link, #cssmenu > ul li ul li a:visited {
         clear:left;
         background:#000099;
         padding:4px 0;
         width:146px;
         border:none;
         border-bottom:1px solid #ffffff;
         position:relative;
         z-index:1000;
        }
        #cssmenu > ul li ul li:hover a, #cssmenu > ul li ul li a:active, #cssmenu > ul li ul li a:hover {
         clear:left;
         background:#0066FF;
         padding:4px 0;
         width:146px;
         border:none;
         border-bottom:1px solid #ffffff;
         position:relative;
         z-index:1000;
        }
        #cssmenu > ul li ul li ul.navigation-3 {
         display:none;
         margin:0;
         padding:0;
         list-style:none;
         position:absolute;
         left:145px;
         top:-2px;
         padding:1px 1px 0 1px;
         border:1px solid #000099;
         border-left:1px solid #000099;
         background:#ffffff;
         z-index:900;
        }
        #cssmenu > ul li ul li:hover ul.navigation-3 {
         display:block;
        }
        #cssmenu > ul li ul li ul.navigation-3 li a:link, #cssmenu > ul li ul li ul.navigation-3 li a:visited {
         background:#000099;
        }
        #cssmenu > ul li ul li ul.navigation-3 li:hover a, #cssmenu > ul li ul li ul.navigation-3 li a:hover, #cssmenu > ul li ul li ul.navigation-3 li a:active {
         background:#0066FF;
        }


        </style>
        <div id='cssmenu'>
        <ul>
           <li class='active '><a href='index.html'><span>Home</span></a></li>
           <li class='has-sub '><a href='#'><span>Products</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
              </ul>
           </li>
           <li><a href='#'><span>About</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>
        </div>

        7. Menu Drop Down


        Kode:


        <style>
        #cssmenu{ height:37px; display:block; padding:0; margin: 0;  border:1px solid; border-radius:5px; }
        #cssmenu > ul {list-style:inside none; padding:0; margin:0;}
        #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
        #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
        #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
        #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
        #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
        #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
        #cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
        #cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
        #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
        #cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
        #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
        #cssmenu ul li > ul{width:200px;}
        #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
        #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }


        #cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); }
        #cssmenu{border-color:#000;}
        #cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;}
        #cssmenu > ul > li > a:after{border-color:#444;}
        #cssmenu > ul > li > a:hover{background:#111;}



        </style>
        <div id='cssmenu'>
        <ul>
           <li class='active '><a href='index.html'><span>Home</span></a></li>
           <li class='has-sub '><a href='#'><span>Products</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
              </ul>
           </li>
           <li><a href='#'><span>About</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>
        </div>

        8. Menu Drop Down


        Kode:


        <style>
        #cssmenu{ height:37px; display:block; padding:0; margin:0;  border:1px solid; border-radius:5px; }
        #cssmenu > ul {list-style:inside none; padding:0; margin:0;}
        #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
        #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
        #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
        #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
        #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
        #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
        #cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
        #cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
        #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
        #cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
        #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
        #cssmenu ul li > ul{width:200px;}
        #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
        #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
        #cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#4fbdf0; background:-moz-linear-gradient(top, #4fbdf0 0%, #45b2d2 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#4fbdf0), color-stop(100%,#45b2d2)); background:-webkit-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%); background:-o-linear-gradient(top,  #4fbdf0 0%,#45b2d2 100%); background:-ms-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%); background:linear-gradient(top,  #4fbdf0 0%,#45b2d2 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4fbdf0', endColorstr='#45b2d2',GradientType=0); }
        #cssmenu{border-color:#3589a1;}
        #cssmenu > ul > li > a{border-right:1px solid #3589a1; color:#fff;}
        #cssmenu > ul > li > a:after{border-color:#6ed1ff;}
        #cssmenu > ul > li > a:hover{background:#36acd2;}

        </style>
        <div id='cssmenu'>
        <ul>
           <li class='active '><a href='index.html'><span>Home</span></a></li>
           <li class='has-sub '><a href='#'><span>Products</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
              </ul>
           </li>
           <li><a href='#'><span>About</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>
        </div>

        9. Menu Drop Down


        Kode:


        <style>
        /* Main navigation block element */
        #cssmenu{
        height:37px;
        display:block;
        padding:0;
        margin:20px auto;
        border:1px solid;
        border-radius:5px;
        }

        #cssmenu > ul {list-style:inside none; padding:0; margin:0;}
        #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}

        /* Styling navigation links */
        #cssmenu > ul > li > a{
        outline:none;
        display:block;
        position:relative;
        padding:12px 20px;
        font:bold 13px/100% Arial, Helvetica, sans-serif;
        text-align:center;
        text-decoration:none;
        text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
        }

        #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}


        /* Extra border for navigation links */
        #cssmenu > ul > li > a:after{
        content:'';
        position:absolute;
        border-right:1px solid;
        top:-1px; bottom:-1px; right:-2px;
        z-index:99;
        }
        #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}

        /* Bullet for dropdowns */
        #cssmenu > ul > li.has-sub > a:before{
        content:'';
        position:absolute; top:18px; right:6px;
        border:5px solid transparent;
        border-top:5px solid #fff;
        }
        #cssmenu > ul > li.has-sub:hover > a:before{top:19px;}

        /* Hover state styles for drop menu link */
        #cssmenu ul li.has-sub:hover > a{
        background:#3f3f3f;
        border-color:#3f3f3f;
        padding-bottom:13px; padding-top:13px;
        top:-1px;
        z-index:999;
        }

        /* Show dropdown when hover */
        #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
        #cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}

        /* Dropdown styles */
        #cssmenu ul li > ul, #cssmenu ul li > div{
        display:none; width:auto;
        position:absolute; top:38px;
        padding:10px 0;
        background:#3f3f3f;
        border-radius:0 0 5px 5px;
        z-index:999;
        }

        /* Dropdown list style */
        #cssmenu ul li > ul{width:200px;}
        #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
        #cssmenu ul li > ul li a{
        outline:none; display:block;
        position:relative;
        margin:0; padding:8px 20px;
        font:10pt Arial, Helvetica, sans-serif; color:#fff;
        text-decoration:none;
        text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
        }

        /* Dropdown box styles */
        #cssmenu ul li > div{width:auto; padding:20px;}
        #cssmenu ul li > div p{
        font:9pt/150% Arial, Helvetica, sans-serif; color:#fff;
        text-align:justify;
        text-shadow:1px 1px 0 rgba(0,0,0,0.5);
        margin:0;
        }

        #cssmenu ul li > div h1{
        position:relative;
        margin:0 0 12px 0;
        padding-bottom:10px;
        border-bottom:1px solid #222;
        font:bold 13pt Arial, Helvetica, sans-serif; color:#bbb;
        text-shadow:1px 1px 0 rgba(0,0,0,0.5);
        }
        #cssmenu ul li > div h1:after{
        content:'';
        height:0; padding:0;
        position:absolute; bottom:-2px; left:0; right:0;
        border-bottom:1px solid #555;
        }

        /* ---------------- Styles ----------------- */


        /* Gray */
        #cssmenu,
        #cssmenu > ul > li > ul > li a:hover{
        background:#d5d5d5;
        background:-moz-linear-gradient(top, #d5d5d5 0%, #c5c5c5 100%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5d5d5), color-stop(100%,#c5c5c5));
        background:-webkit-linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
        background:-o-linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
        background:-ms-linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
        background:linear-gradient(top, #d5d5d5 0%,#c5c5c5 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d5d5', endColorstr='#c5c5c5',GradientType=0);
        }
        #cssmenu {border-color:#888;}
        #cssmenu > ul > li > a{border-right:1px solid #888; color:#fff;}
        #cssmenu > ul > li > a:after{border-color:#e5e5e5;}
        #cssmenu > ul > li > a:hover{background:#bbb;}

        </style>
        <div id='cssmenu'>
        <ul>
           <li class='active '><a href='index.html'><span>Home</span></a></li>
           <li class='has-sub '><a href='#'><span>Products</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
              </ul>
           </li>
           <li><a href='#'><span>About</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>
        </div>

        10. Menu Drop Down


        Kode:

        <style>
        #cssmenu {
         border:none;
         border:0px;
         margin:0px;
         padding:0px;
         font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
         font-size:14px;
         font-weight:bold;
         }
        #cssmenu  ul{
         background:#F93;
         height:50px;
         list-style:none;
         margin:0;
         padding:0;
         -webkit-border-radius: 15px;
         -moz-border-radius: 15px;
         border-radius: 15px;
         -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
         -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
         box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
         }
         #cssmenu  li{
          float:left;
          padding:0px 0px 0px 15px;
          }
         #cssmenu  li a{
          color:#000;
          display:block;
          font-weight:normal;
          line-height:50px;
          margin:0px;
          padding:0px 25px;
          text-align:center;
          text-decoration:none;
          }
         #cssmenu  li a:hover{
          background:#C60;
          color:#FFFFFF;
          text-decoration:none;
          -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
          -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
          box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
          }
         #cssmenu  ul li:hover a{
          background:#C60;
          color:#FFFFFF;
          text-decoration:none;
          }
         #cssmenu  li ul{
          display:none;
          height:auto;
          padding:0px;
          margin:0px;
          border:0px;
          position:absolute;
          width:200px;
          z-index:200;
          }
         #cssmenu  li:hover ul{
          display:block; 
          }
         #cssmenu  li li {
          display:block;
          float:none;
          margin:0px;
          padding:0px;
          width:200px;
          background:#F93;
          /*this is where the rounded corners for the dropdown disappears*/
          }
         #cssmenu  li:hover li a{
          background:none;
          }
         #cssmenu  li ul a{
          display:block;
          height:50px;
          font-size:12px;
          font-style:normal;
          margin:0px;
          padding:0px 10px 0px 15px;
          text-align:left;
          }
         #cssmenu  li ul a:hover, #cssmenu  li ul li:hover a{
          border:0px;
          color:#ffffff;
          text-decoration:none;
          background:#C60;
          -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
          -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
          box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
          }

        </style>
        <div id='cssmenu'>
        <ul>
           <li class='active '><a href='index.html'><span>Home</span></a></li>
           <li class='has-sub '><a href='#'><span>Products</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
              </ul>
           </li>
           <li><a href='#'><span>About</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>
        </div>

        KETERANGAN:

        Kalian bisa menambah atau mengurangi menu dengan mencopy baris kode dan edit judulnya atau menghapusnya
        Contoh:
        <li><a href='#'><span>GAME</span></a></li>
        <li><a href='#'><span>APLIKASI</span></a></li>
        <li><a href='#'><span>EBOOK</span></a></li>
        <li><a href='#'><span>MP3</span></a></li>

        Kalian juga bisa mengganti tanda # dengan link yang anda inginkan

        Baca juga : cara membuat daftar isi dan daftar postingan

        Itulah beberapa contoh menu drop down yang mudah diinput, semoga situs atau blog anda lebih menarik dan mampu menarik banyak pengunjung. Terima Kasih sudah berkunjung.
        Share:
        Read More
        • ()
        • ()
        Show more

        Halaman