Menu Dropdown sendiri merupakan sebuah menu yang berisikan kumpulan-kumpulan link yang ditampilkan menurun kebawah ketika menu tersebut disorot oleh cursor/mouse.
Oke langsung saja kita mulai untuk pembuatan menu dropdown sederhana, namun sebelumnya kita harus menyiapkan terlebih dahulu sebuah skrip/kode HTML dan kemudian kita buat skrip/kode CSSnya. Untuk lebih jelasnya ikuti langkah-langkah berikut ini.
Membuat Skrip HTML :
<html>
<head>
<title>Dropdown Menu</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Profil</a></li>
<li><a href=”#”>Artikel</a></li>
<li><a href=”#”>Tutorial</a>
<ul>
<li><a href=”#”>Photoshop</a></li>
<li><a href=”#”>Corel Draw</a></li>
</ul></li>
<li><a href=”#”>Pemrograman</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>CSS</a></li>
</ul></li>
</ul>
</nav>
</body>
</html>
<head>
<title>Dropdown Menu</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Profil</a></li>
<li><a href=”#”>Artikel</a></li>
<li><a href=”#”>Tutorial</a>
<ul>
<li><a href=”#”>Photoshop</a></li>
<li><a href=”#”>Corel Draw</a></li>
</ul></li>
<li><a href=”#”>Pemrograman</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>CSS</a></li>
</ul></li>
</ul>
</nav>
</body>
</html>
Simpan skrip diatas dengan nama index.html
Penjelasan :
Skrip <link href=”style.css” rel=”stylesheet” type=”text/css”> ini merupakan skrip untuk memanggil file CSS yang akan kita buat nanti.
Selanjutnya kita buat skrip untuk file CSSnya.
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: purple;
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: blue;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 10px 40px;font-weight:bold;
color: orange; text-decoration: none;
}
nav ul ul {
background:purple; 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;
}
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: purple;
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: blue;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 10px 40px;font-weight:bold;
color: orange; text-decoration: none;
}
nav ul ul {
background:purple; 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;
}
Simpan dengan nama style.css.
Sekian tutorial kali ini selamat mencoba dan semoga bermanfaat.
