Membuat menu Dropdown dengan CSS

Kali ini kita coba membuat menu dropdown menggunakan HTML dan CSS, script ini memang sangat sederhana, namun cukup lumayan cantik untuk menghiasi website Anda.

Sekilas tentang Menu Dropdown.
Menu dropdown adalah salah satu fitur yang paling populer pada website. karena fungsi nya yang berguna pada sebuah halaman website.

Diantaranya adalah sebagai petunjuk atau arahan halaman pada sebuah website.

Memang sepertinya sangat rumit membuat menu semacam ini, namun dengan ketelitian dan belajar lebih giat lagi, ternyata sebenarnya cukup mudah untuk di praktekkan.

Script menu dropdown

<!DOCTYPE html>
<html>
<head>
    <title>CSS Menu dropdown</title>
    <meta charset="UTF-8" />

<!-- begin menu CSS code -->

<style type="text/css">
.dropmenu {
    background: #616161;
    height: 30px;
    list-style-type: none;
    margin: 0;
    padding: 0px;
}
.dropmenu li {
    border-right: solid 1px #fff;
    float: left;
    height: 30px;
}
.dropmenu li a {
    color: #fff;
    display: block;
    font: 12px arial, verdana, sans-serif;
    font-weight: bold;
    padding: 9px 20px;
    text-decoration: none;
}
.dropmenu li:hover { background: #778899; position: relative; }
.dropmenu li:hover a { text-decoration: underline; }
.dropmenu li:hover ul {
    background-color: #3f4a54;
    border: 1px solid #ccffff;
    left: 0px;
    padding: 3px;
    top: 30px;
    width: 160px;
}
.dropmenu li:hover ul li { border: none; height: 18px; }
.dropmenu li:hover ul li a {
    background-color: #778899;
    border: 1px solid transparent;
    color: #fff;
    display: block;
    font-size: 11px;
    height: 18px;
    line-height: 18px;
    padding: 0px;
    text-decoration: none;
    text-indent: 5px;
    width: 158px;
    padding: 3px;
}
.dropmenu li:hover ul li a:hover {
    background: #c0c0c0;
    border: solid 1px #f00;
    color: #000;
    height: 18px;
    padding: 3px;
}
.dropmenu ul {
    left: -9999px;
    list-style-type: none;
    position: absolute;
    top: -9999px;
}
</style>

<!-- end of CSS menu code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<div style="font-family: tahoma; font-size: 12px; color: #0000ff; margin-bottom: 20px;">
    Contoh <b>Menu Dropdown</b> dengan <b>CSS</b>.<br><hr>
    <i style="color:#333;">* Menu dropdown akan otomatis terbuka saat cursor berada pada menu utama</i>.
</div>

<!-- begin menu HTML code -->

<ul class="dropmenu">
<li><a href="#1">Website</a>
    <ul>
    <li><a href="https://my.id.site" target="blank">Free URL Shortener</a></li>
    <li><a href="https://fb.me/keinmaster" target="blank">My FB Page</a></li>
    <li><a href="https://my-id.site/youtube" target="blank">Youtube chanel</a></li>
    </ul>
</li>
<li><a href="#2">Menu 2</a>
    <ul>
    <li><a href="#1">Sub Menu 1</a></li>
    <li><a href="#2">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#3">Menu 3</a>
    <ul>
    <li><a href="#1">Sub Menu 1</a></li>
    <li><a href="#2">Sub Menu 2</a></li>
    </ul>
</li>
</ul>

<!-- end of HTML menu code -->


<p style="font-family: tahoma; font-size: 11px; color: #0000ff;">
    » Now try with yourself....
</p>
<hr>

<!-- End of body content -->

</body>
</html>

Silahkan Copy Paste script di atas dan simpan dengan ekstensi .html (dot html), lalu buka dengan perambaan kesukaan Anda untuk melihat hasilnya.

Silahkan gunakan Realtime HTML Editor ↗ Script diatas akan otomatis ditampilkan pada halaman tersebut.

Semoga bermanfaat, selamat mencoba, sampai jumpa di artikel berikutnya dan semoga sukses selalu teruntuk Anda semua.

Mungkin Anda Menyukai