Pertama buatlah struktur HTML dari menu yang ingin di gunakan, misalnya seperti dibawah ini :
<html> <head> </head> <body> <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> </body> </html>
Jangan lupa simpan di file yang kita inginkan, misalnya menu.html.
Tambahkan kode dibawah ini diantara tag <head> </head>
<style type="text/css">
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;
}
</style>
Sedikit penjelasan :
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.
Jangan lupa simpan kembali file menu.html tadi. Setelah itu coba buka file menu.html di browser. Jika tidak ada kesalahan maka tampilannya akan menjadi seperti dibawah ini :
Mungkin hanya itu saja yang dapat manuksare bagikan tentang Cara membuat menu Dropdown dengan CSS, jangan lupa untuk menyimak artikel lain manuksare.blogspot.com, wassalam.
0 komentar:
Posting Komentar