Advertisement here

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

Next Post Previous Post
62 Comments
  • Unknown
    Unknown December 23, 2013 at 12:41 AM

    keren gan

    • Unknown
      Unknown December 24, 2013 at 3:10 AM

      joooo$$$ gan

  • Unknown
    Unknown December 26, 2013 at 3:10 AM

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

  • Bungfrangki
    Bungfrangki January 8, 2014 at 2:24 AM

    Mantab gan, cara ini berhasil 100%

  • blogketok
    blogketok March 20, 2014 at 4:42 AM

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

    • Rangga
      Rangga March 20, 2014 at 6:17 PM

      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

    • Unknown
      Unknown June 14, 2015 at 8:47 PM

      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

  • Unknown
    Unknown March 23, 2014 at 3:14 AM

    kalo itu kan horizon kalo vertikal gmn om

    • Rangga
      Rangga April 9, 2014 at 6:34 PM

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

  • Unknown
    Unknown April 8, 2014 at 10:46 PM

    aku gak bisa gan , masi bingung

    • Rangga
      Rangga April 9, 2014 at 6:35 PM

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

    • Unknown
      Unknown April 20, 2014 at 10:09 PM

      ini di buat di html nya atau dmana gan
      ?

    • Rangga
      Rangga April 23, 2014 at 1:30 AM

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

    • Gothicianz
      Gothicianz July 17, 2017 at 11:09 PM

      Manggil cssnya gimana?
      Itu link pertama menggunakan css yg mana mohon dijelaskan.
      Trims

  • Aulia_Jogjakarta
    Aulia_Jogjakarta April 22, 2014 at 12:46 AM

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

    • Rangga
      Rangga April 23, 2014 at 1:31 AM

      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

  • Muhafizhin C.STMI
    Muhafizhin C.STMI April 26, 2014 at 2:13 AM

    mas urutan cssnya gmana

    • Rangga
      Rangga May 12, 2014 at 7:58 PM

      Itu sudah ada gan, coba tambahkan seperti yang diatas aja.

  • maxindo steel
    maxindo steel May 14, 2014 at 12:46 AM

    cara menambah atau mengurangi sub menunya gimana gan, mohon pencerahannya

  • Unknown
    Unknown May 27, 2014 at 12:26 AM

    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

    • Rangga
      Rangga May 28, 2014 at 3:06 AM

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

  • Unknown
    Unknown June 6, 2014 at 5:44 PM

    cssnya ditaru sebelah mana mas ?

    • Rangga
      Rangga June 17, 2014 at 1:14 AM

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

  • Nugraha Alvitto
    Nugraha Alvitto June 11, 2014 at 4:44 PM

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

    • Rangga
      Rangga June 17, 2014 at 1:16 AM

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

  • Unknown
    Unknown June 14, 2014 at 10:58 PM

    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

  • bluezula
    bluezula June 17, 2014 at 7:19 PM

    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..

    • Rangga
      Rangga August 22, 2014 at 5:19 AM

      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

  • petdraptyle
    petdraptyle June 18, 2014 at 7:25 AM

    thank gan :D ,

  • juniorbarista
    juniorbarista June 21, 2014 at 8:07 PM

    gan itu kode cssnya harus diletakkan dimana ya?

    • Rangga
      Rangga August 22, 2014 at 5:24 AM

      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

  • Unknown
    Unknown July 24, 2014 at 7:05 PM

    wokkeh

  • Unknown
    Unknown August 13, 2014 at 7:17 AM

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

    • Rangga
      Rangga August 22, 2014 at 5:25 AM

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

  • Unknown
    Unknown September 8, 2014 at 12:10 AM

    gan, menu ini bisa dijadiin rata tengah ga ya ?

  • Admin+
    Admin+ October 31, 2014 at 5:10 AM

    mantabs makasih sudah berbagi salam

  • Unknown
    Unknown November 9, 2014 at 9:10 AM

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

  • Unknown
    Unknown November 26, 2014 at 1:27 PM

    sangat bermanfaat kk ^_^

  • Unknown
    Unknown December 7, 2014 at 9:29 AM

    mantap gan (y)

  • Abu Nizar Zulmi
    Abu Nizar Zulmi December 10, 2014 at 5:41 AM

    Makasih mas (y)

  • Syakir Rahman
    Syakir Rahman December 10, 2014 at 8:18 PM

    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

  • Unknown
    Unknown February 6, 2015 at 5:56 PM

    This comment has been removed by the author.

  • Bambang
    Bambang February 10, 2015 at 5:44 AM

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

  • Alfian M
    Alfian M March 4, 2015 at 4:39 PM

    buat html nya di mana ?

  • Unknown
    Unknown March 31, 2015 at 8:40 PM

    membuat dropdown apa menu-menunya harus sebaris yah?

  • Masjid Al-Jihad Kotabaru
    Masjid Al-Jihad Kotabaru April 3, 2015 at 8:18 AM

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

    Ini website saya : mutiarafarhan.com

  • Mengunkap Bisnis Internet
    Mengunkap Bisnis Internet April 23, 2015 at 11:15 AM

    Keren bos..

  • Unknown
    Unknown May 7, 2015 at 7:51 AM

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

  • Unknown
    Unknown May 8, 2015 at 7:54 PM

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

  • zenzen
    zenzen May 17, 2015 at 10:03 AM

    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

  • Unknown
    Unknown May 29, 2015 at 7:28 AM

    script yang ini maksudnya apa gan

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

  • Anonymous
    Anonymous July 24, 2015 at 7:54 AM

    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

  • Unknown
    Unknown November 14, 2015 at 5:48 PM

    BERFUNGSI GAN THX BANGET YA!!

  • Unknown
    Unknown December 3, 2015 at 11:41 PM

    Artikelnya bagus, sangat mudah untuk dimengerti terima kasih.

  • itsmefiiiii
    itsmefiiiii April 5, 2016 at 8:52 PM

    cara masukin postingannya ke menu dan sub menu gimana ya? makasih

  • POLTEKPEL surabaya
    POLTEKPEL surabaya April 30, 2016 at 7:33 PM

    punyaq kok gk jalan ,padahal sudah sama scribs

  • POLTEKPEL surabaya
    POLTEKPEL surabaya April 30, 2016 at 7:33 PM

    tidak bisa tampil

  • Mimin Betta
    Mimin Betta May 28, 2016 at 9:33 AM

    sedap!

  • Unknown
    Unknown November 1, 2017 at 11:10 PM

    tanda ">" pada baris ke "nav ul li:hover > ul {" fungsinya u apa?

  • Unknown
    Unknown July 3, 2018 at 1:23 AM

    Mantap Tutornya Gan

  • Astuti Ernawati
    Astuti Ernawati October 3, 2018 at 7:09 PM

    makasih udah share ilmu,,mau tanya ka gimana caranya buat menu yang vertikal,,makasih
    Kunjungi website kampus saya ya http://www.atmaluhur.ac.id
    Dan web blog saya https://astutiernawati.mahasiswa.atmaluhur.ac.id/

  • Blogger from another world
    Blogger from another world May 1, 2019 at 8:03 PM

    Terimakasih untuk ilmunya sangat bermanfaat

Add Comment
comment url
Related Post
tutorial