Lompat ke konten Lompat ke sidebar Lompat ke footer

Translate this page

Cara Membuat Dropdown Menu dengan CSS

Dropdown menu berfungsi saat kita membutuhkan sub menu untuk menu utama. Pada posting kali ini saya akan mencoba membuat menu dropdown sederhana dengan menggunakan css (Cascading Style Sheet). Disini saya akan membuat dua buah file yaitu style.css yang berfungsi untuk mengatur tampilan dari code html dan yang kedua adalah dropdown.html yang akan tampil di dalam browser internet. Kedua file ini harus diletakkan dalam folder yang sama.

Baiklah, berikut ini adalah file style.css nya :
Buka notepad anda, tulis atau copy paste code di bawah, lalu save as style.css.

/* CSS Document */
#menu { position: relative; width: 100%; height: 40px; background: #6699cc; border: 1px solid #000000;
}
#menu ul{ margin: 0; padding: 0; list-style: none;
}
#menu ul li{ position: relative; float: left;
}
#menu ul li a{ display: block; text-decoration: none; color: #ffffff; padding: 10px; float: left; border-right: 1px solid #000000;
}
#menu ul li a:hover{ background-color: #000000; }
#menu ul li ul { display: none;}
#menu ul li:hover ul { display: block; position: absolute; top: 41px; left: 0px;
}
#menu ul li:hover ul li a{ display: block; background: #6699cc; color: #ffffff; width: 130px; border-left: 1px solid #000000;
}
#menu ul li:hover ul li a:hover { background: #000000; color: #ffffff;
 }

Lalu file dropdown.html nya adalah :

Buka notepad kembali, copy paste code di bawah, lalu save as dropdown.html.

<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dropdown menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Portfolio</a>
<ul>
<li><a href="">Web Design</a></li>
<li><a href="">Web Programming</a></li>
</ul></li>
<li><a href="">Contact</a>
<ul>
<li><a href="http://www.bum1.info">bumi.info</a></li>
<li><a href="http://www.prodesign.web.id">Prodesign</a></li>
</ul></li>
<li><a href="">Post Feed</a>
<ul>
<li><a href="">Via Web</a></li>
<li><a href="">Via Phone</a></li>
<li><a href="">Via Rss</a></li>
</ul></li></ul>
</body>
</html>

Simpan kedua file dalam folder yang sama. Setelah selesai coba ditest dengan membuka file dropdown.html dengan browser kesayangan anda. Bila berhasil maka akan terlihat seperti gambar di bawah ini :


Semoga bermanfaat.
Sumber : www.bum1.info

Posting Komentar untuk "Cara Membuat Dropdown Menu dengan CSS"