Dropdown Menu adalah menu yang mempunyai submenu di dalamnya, jika kita arahkan kursor ke menu tersebut maka akan muncul menu lainya yang biasanya memanjang ke bawah dan di dalamnya terdapat submenu. Pada artikel kali ini saya akan mengajarkan bagaimana cara membuat Dropdown Menu sederhana menggunakan HTML dan CSS.
pertama anda bisa gunakan kode HTML seperti di bawah ini
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li>
<a href="#">Products</a>
<ul>
<li><a href="">Products 1</a></li>
<li><a href="">Products 2</a></li>
<li><a href="">Products 3</a></li>
<li><a href="">Products 4</a></li>
<li><a href="">Products 5</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
kemudian untuk CSS anda bisa gunakan kode di bawa ini
* {margin:0; padding:0;}
body {background-color:#333;font-family:Arial, Helvetica, sans-serif;color:#FFF}
nav {background-color:#900;height:50px;line-height:50px;position:relative;width:770px;margin:auto;margin-top:80px}
nav ul {list-style:none}
nav ul li a {float:left;width:150px;display:block;text-align:center;color:#FFF;text-decoration:none;text-transform:uppercase}
nav ul li a:hover {background-color:#666;display:block}
nav ul li:hover ul {display:block}
nav ul ul {display:none;list-style:none;position:absolute;background-color:#900;left:300px;top:50px;width:190px}
nav ul ul li a {float:none;display:block;padding-left:30px;text-align:left;width:160px}
nav ul ul li a:hover {color:#990;}
untuk melihat hasilnya anda bisa melihatnya di bawah ini