Cara membuat menu Dropdown dengan CSS

Pada artikel kali ini saya akan mencoba berbagi tutorial tentang membuat menu dropdown dengan CSS. Sesuai dengan judulnya jadi disini kita hanya menerapkan code CSS dan tidak menggunakan javascript.

Pertama buatlah struktur HTML dari menu yang ingin di gunakan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav>

Diatas adalah menu utama dan sekarang coba buat submenu, misalkan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a>
<ul>
<li><a href="#">WordPress</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav>

Setelah anda membuat submenu, silahkan anda cek menu yang anda buat tadi. Memang terlihat kurang menarik dan biasa saja karena kita belum menambahkan style pada menu tersebut. Berikut code css yang membuat dropdown anda berjalan dengan baik:
nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}

Berikut penjelasan dari code css:

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

Code ini mengartikan, bahwa elemen yang memiliki submenu, tidak akan di tampilkan. Dan akan tampil ketika terjadi hover pada li yang mempunyai submenu.

nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}

Code ini adalah styling untuk submenu. Artikel mempunyai submenu WordPress, Photoshop dan Web Design. Nah style ini dimaksudkan untuk submenu.
Jika sudah maka tampilan akhir dari code diatas adalah seperti ini:

Dropdown menu dengan CSS


Sekian tutorial tentang membuat menu dropdown dengan CSS, jika ada yang salah atau yang ingin ditanyakan silahkan comment saja.

Bisa di download disini

59 comments:

  1. terimakasih banyak mas, menunya keren, nambah informasi saya tentang css lagi nih, maklum soalnya masih belajar css, hihi

    ReplyDelete
  2. Mantab gan, cara ini berhasil 100%

    ReplyDelete
  3. saya coba di FLOCK tidak jalan, SUB MENU tidak keluar. Ketika di coba di MODZILA, Jalan.....Kenapa??????????

    ReplyDelete
    Replies
    1. Halo, setelah saya cek kenapa di flock tidak jalan. Karena Flock based on Firefox 3. Pada code yang saya berikan ini ada code dan ini adalah salah satu element dari css3 dan belum support di FIrefox 3.

      Kenapa di FIrefox jalan, mungkin karena anda menggunakan firefox versi terbaru.

      Silahkan cek di http://caniuse.com/#search=nav

      Delete
    2. Itu disebabkan masing2 pengembang browser memiliki ciri khas tertentu untuk css-nya apalagi kalo harus work di IE 7, bakalan gila :D
      maka dari itu kadang perlu support dari jquery agar semua property css jalan.

      salam CARA MEMBUAT WEBSITE SENDIRI

      Delete
  4. kalo itu kan horizon kalo vertikal gmn om

    ReplyDelete
    Replies
    1. OTW gan, haha
      Ada referensi ngga yang pengen dubuatna kayak web apa? ato gambarnya aja.

      Delete
  5. Replies
    1. Ga bisa gimana nya gan? seharusnya kalo selector nya udah sama kayak yang diatas sih bisa.

      Delete
    2. ini di buat di html nya atau dmana gan
      ?

      Delete
    3. Iya gan di file html dan di tarun di dalam tag body. kemudian sesuaikan mau ditarun dimana menu nya.

      Delete
  6. gan cara buat upload file pdf gimana gan kan ane mau nyimpen format cv
    trus juga lenkapin gan endingnya

    ReplyDelete
    Replies
    1. Makasih gan atas masukannya.
      Oiya, kpan2 saya coba buat tutorial cara bikin input upload, cuma css dan html nya aja :D hehe ngga masuk ke database nya haha kurang mengerti dunia PHP

      Delete
  7. Replies
    1. Itu sudah ada gan, coba tambahkan seperti yang diatas aja.

      Delete
  8. artikelnya bagus, cek juga bro aplikasi akunting buatan anak Indonesia kiper.co.id

    ReplyDelete
  9. cara menambah atau mengurangi sub menunya gimana gan, mohon pencerahannya

    ReplyDelete
  10. di web saya sudah bisa cuman kok gak sempurna ya? karena itu ukuran widthnya gak full sesuai dengan halaman, dan harus isi menu supaya penuh coba cek www.nyantai.us

    ReplyDelete
    Replies
    1. tadi saya cek web agan, tapi keliatanya kok sempurna ya hehe ga ada masalah gan.

      Delete
  11. Replies
    1. di file .css nya agan gan, disini saya share nya pake external css. Agan bisa cek di file yang bisa di download

      Delete
  12. mas itu sub menu di letakan dimananya mas ?
    saya kurang mengerti sedikit, mohon pencerahannya.

    ReplyDelete
    Replies
    1. Di li yang ingin agan tambahin sub menu.
      Cde diatas nambahin submenu di dalam menu Artikel. AGan bisa nambahin tag ul didalam tag li

      Delete
  13. berfariasi ternyata ya cara membuat menu, ada yang melalui edit template ada juga yang melalui java scrip. ternyata istilah banyak jalan menuju roma ternya benar juga ya... hehehehe

    ReplyDelete
  14. Mas, untuk menuju ke sub menunya masih harus edit url atau langsung di deteksi sama label-nya? Kalau masih edit url, kode yang harus dimasukin apa aja mas? Mohon pencerahannya..

    ReplyDelete
    Replies
    1. Maaf baru balas, sedang ada kesibukan kemarin kemarin. Untuk url sub menunya agan harus setting manual, tapi kalo menggunakan CMS seperti WordPress biasanya otomatis. Karena disini kita menggunakan hanya HTML biasa jadi harus settiing di url nya, misal
      <li><a href="#">HTML</a></li>
      Pada kode tersebut agan bisa menyesuaikan href dengan link yang ingin dituju

      Delete
  15. gan itu kode cssnya harus diletakkan dimana ya?

    ReplyDelete
    Replies
    1. Di tutorial Cara membuat menu Dropdown dengan CSS ini saya menggunakan CSS dengan metode external, jadi semua kode CSS saya simpan di file style.css . Jadi di index.html nya kita tinggal memanggil file style.css ini di dalam tag <head>

      ......

      </head>

      Sudah saya sertakan contohnya di file yang bisa di download

      Delete
  16. mas itu kode cssnya diletakkan dimana semua...saya bingung,mohon bantuannya ya mas!

    ReplyDelete
    Replies
    1. Di dalam file style.css gan, soalnya saya menggunakan metode external CSS, agan bisa lihat contohnya di file yang bisa di download.

      Delete
  17. gan, menu ini bisa dijadiin rata tengah ga ya ?

    ReplyDelete
  18. mantabs makasih sudah berbagi salam

    ReplyDelete
  19. top markotop gan....bagus,simple,mudah di pahami........LANJUTKAN !!!! goodjob

    ReplyDelete
  20. Widiiih, keren stylenya saya suka hehe.. btw saya juga punya artikel dropdown menu yang serupa nih, moga bisa nambahin :D
    http://www.syakirurohman.net/2014/12/tutorial-multi-level-dropdown-menu-animasi-css3.html

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
  22. keren gan, izin sedot, di tunggu kunbal ya gan http://ilmufirizky.blogspot.com/

    ReplyDelete
  23. makasih banyak mass buat infonya,, nice post

    http://toko661.com/pengobatan-tradisional-abses-anus/

    ReplyDelete
  24. membuat dropdown apa menu-menunya harus sebaris yah?

    ReplyDelete
  25. kalau css nya begini gimana ya gan membuat drop down sub menu nya : http://prntscr.com/6p1r7n

    Ini website saya : mutiarafarhan.com

    ReplyDelete
  26. thanks bro ... kunjungan baliknya blog baru ane idjenius.blogspot.com

    ReplyDelete
  27. kak mau nanya nih kalo coding web html vertikal gimana ya? trmks
    maklum baru belajar hoho

    ReplyDelete
  28. Mas bisa lebih di terangin lagi ga ? masalah css nya
    kaya stiap koding css yang tercantum di atas aja di jelasin , soalnya masih rada bingung dengan css ( position:absolute ) dll sbgny
    trimkasih mas

    ReplyDelete
  29. script yang ini maksudnya apa gan

    nav ul:after {
    content: ""; clear: both; display: block;
    }

    ReplyDelete
  30. Sunggu bermanfaat tutorial css nya..

    Saya juga punya tutorial css di blog kang, monggo di baca sekalian di koreksi sama akang, takutnya ada yg salah :)

    Cara memilih element atau selector tertentu

    http://www.wappersunda.com/cara-memilih-element-atau-selector-terte.xhtml

    ReplyDelete
  31. Artikelnya bagus, sangat mudah untuk dimengerti terima kasih.

    ReplyDelete
  32. cara masukin postingannya ke menu dan sub menu gimana ya? makasih

    ReplyDelete
  33. punyaq kok gk jalan ,padahal sudah sama scribs

    ReplyDelete