Dropdown Menu Classes

Below is a Demonstration of How Dropdown Menu Works

Home About Services Portfolio Contact

How the Dropdown Menu Works


  1. The top line contains a button that triggers the dropdown on hover.

  2. The div with the class "dropdown-content" remains hidden until you hover over the menu button.

  3. You can customize the content inside the "dropdown-content" div based on your navigation needs.

  4. The last section is the "content" div, where you place your website content—whatever that may be.


Please Hover over the Menu button above to trigger the dropdown effect!


All you need to use this Dropdown is this html document.


<div class="dropdown">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Contact</a>
</div>
</div>

<div class="content">
<h1>Welcome to Our Website</h1>
<p>This is where your contents will be.</p>
</div>