If you’re using Unbounce to build high-converting landing pages, you already know how important clean, user-friendly navigation is. One simple yet powerful tool to enhance user experience is the drop-down menu.
In this blog post, you’ll learn how to build a custom drop-down menu in Unbounce using HTML, CSS, and JavaScript – even if you’re not a developer.
Step 1: Add an HTML Block
In your Unbounce page builder:
Drag and drop the “HTML” widget to the section where you want the drop-down.
Paste the following code:
<div class="container">
<div class="dropdown">
<button class="dropbtn">Services</button>
<div class="dropdown-content">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Products</button>
<div class="dropdown-content">
<a href="#">LInk1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">About</button>
<div class="dropdown-content">
<a href="#">LInk1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resources</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#news">Link</a>
</div>
Step 2: Add the CSS Stylin
- Add a new CSS stylesheet to your page.
- Add CSS rules to style the dropdown’s appearance (e.g., size, colors, borders).
<style>
.container {
position: relative;
text-align: left;
height: 200px;
background-color: transparent;
color: black;
z-index: 1000 !important;
}
.container a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: transparent;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-top: 2px solid red;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
background-color: red;
border-top-color:black;
}
</style>
Step 3:- Go to Preview and that’s how your Drop-Down Menu is going to look.
What This Code Does
Expands a drop-down list of links (can be service pages, categories, pricing tiers, etc.) on hover
Automatically closes the menu when a user clicks outside it
Tip: Customizing the Menu
Change the links: Replace the
href="..."URLs with your own landing pages.Style the hover effect: Update colors and fonts to match your brand.
Trigger actions: Instead of links, you can trigger popups, hide/show content, or scroll to a particular section.
If you’re not comfortable setting this up yourself or want to save time, I can help!
👉 Contact Me Here to get this exact feature installed on your Unbounce landing page – or have something custom built just for your needs.
✅ Fast turnaround
✅ Works perfectly with Unbounce
✅ No messy code – I do it all for you
💬 Got feedback or a feature request? Drop me an email at support@unbouncehacks.com – I’d love to hear from you!
