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>
<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:
<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>
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;
}
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;
}
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;
}
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
keren gan
joooo$$$ gan
terimakasih banyak mas, menunya keren, nambah informasi saya tentang css lagi nih, maklum soalnya masih belajar css, hihi
Mantab gan, cara ini berhasil 100%
saya coba di FLOCK tidak jalan, SUB MENU tidak keluar. Ketika di coba di MODZILA, Jalan.....Kenapa??????????
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
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
kalo itu kan horizon kalo vertikal gmn om
OTW gan, haha
Ada referensi ngga yang pengen dubuatna kayak web apa? ato gambarnya aja.
aku gak bisa gan , masi bingung
Ga bisa gimana nya gan? seharusnya kalo selector nya udah sama kayak yang diatas sih bisa.
ini di buat di html nya atau dmana gan
?
Iya gan di file html dan di tarun di dalam tag body. kemudian sesuaikan mau ditarun dimana menu nya.
Manggil cssnya gimana?
Itu link pertama menggunakan css yg mana mohon dijelaskan.
Trims
gan cara buat upload file pdf gimana gan kan ane mau nyimpen format cv
trus juga lenkapin gan endingnya
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
mas urutan cssnya gmana
Itu sudah ada gan, coba tambahkan seperti yang diatas aja.
cara menambah atau mengurangi sub menunya gimana gan, mohon pencerahannya
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
tadi saya cek web agan, tapi keliatanya kok sempurna ya hehe ga ada masalah gan.
cssnya ditaru sebelah mana mas ?
di file .css nya agan gan, disini saya share nya pake external css. Agan bisa cek di file yang bisa di download
mas itu sub menu di letakan dimananya mas ?
saya kurang mengerti sedikit, mohon pencerahannya.
Di li yang ingin agan tambahin sub menu.
Cde diatas nambahin submenu di dalam menu Artikel. AGan bisa nambahin tag ul didalam tag li
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
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..
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
thank gan :D ,
gan itu kode cssnya harus diletakkan dimana ya?
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
wokkeh
mas itu kode cssnya diletakkan dimana semua...saya bingung,mohon bantuannya ya mas!
Di dalam file style.css gan, soalnya saya menggunakan metode external CSS, agan bisa lihat contohnya di file yang bisa di download.
gan, menu ini bisa dijadiin rata tengah ga ya ?
mantabs makasih sudah berbagi salam
top markotop gan....bagus,simple,mudah di pahami........LANJUTKAN !!!! goodjob
sangat bermanfaat kk ^_^
mantap gan (y)
Makasih mas (y)
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
This comment has been removed by the author.
keren gan, izin sedot, di tunggu kunbal ya gan http://ilmufirizky.blogspot.com/
buat html nya di mana ?
membuat dropdown apa menu-menunya harus sebaris yah?
kalau css nya begini gimana ya gan membuat drop down sub menu nya : http://prntscr.com/6p1r7n
Ini website saya : mutiarafarhan.com
Keren bos..
thanks bro ... kunjungan baliknya blog baru ane idjenius.blogspot.com
kak mau nanya nih kalo coding web html vertikal gimana ya? trmks
maklum baru belajar hoho
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
script yang ini maksudnya apa gan
nav ul:after {
content: ""; clear: both; display: block;
}
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
BERFUNGSI GAN THX BANGET YA!!
Artikelnya bagus, sangat mudah untuk dimengerti terima kasih.
cara masukin postingannya ke menu dan sub menu gimana ya? makasih
punyaq kok gk jalan ,padahal sudah sama scribs
tidak bisa tampil
sedap!
tanda ">" pada baris ke "nav ul li:hover > ul {" fungsinya u apa?
Mantap Tutornya Gan
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/
Terimakasih untuk ilmunya sangat bermanfaat