Building drop-down header menus tutorial


I have a lot of landing pages that I want to be really, really integrated with my website, to the point that visitors don’t think they’ve headed off my site when they visit them. Particularly, I want the site header to look and behave the exact same way whether these pages are on or Unbounce.

If you look at you’ll notice I have a few drop downs for secondary navigation in my header. Today I discovered it’s pretty easy to replicate that that with CSS in Unbounce (compare one of my newer pages, e.g. I didn’t see anything in the knowledge base about it, so I figured I’d post it here.

DISCLAIMER: I know enough CSS to get me in trouble but I am not a developer. I’m sure I’ve failed to adhere to all development best practices here. I’m open to suggestions/criticism.

All I had to do was to create a div for each of my menu items and then hide the 

element that contained my submenu. For example:

CUSTOMERS Pharma & Healthcare Construction & Manufacturing Energy & Utilities Finance & Insurance Media & Entertainment Retail Other

CSS then makes it really easy to display that
element on hover. Here’s what I used (I also added some animated transitions):

/* this section displays the dropdown menu and defines the dropdown styles */

 @-webkit-keyframes fadeIn {

from { opacity: 0; }

  to { opacity: 1; } }

 @keyframes fadeIn {

from { opacity: 0; }

  to { opacity: 1; } }

 .dropdown {

position: relative;

display: inline-block; }

 .dropdown:hover .dropdown-content {

display: block !important;

-webkit-animation-delay: 0.5s;

animation-delay: 0.5s

-webkit-animation: fadeIn 0.5s;

animation: fadeIn 0.5s; }

I put this, along with the rest of the CSS I use to style my menu (to be honest, that was the hard part), in the script manager so I don’t have to worry about adding it to each page.

Anyways, pretty simple stuff but maybe this will help point someone in the right direction. Happy lead hunting!

Issues embedding HTML (Unbounce and WebinarJam)
Create a menu in unbounce

This is helpful as I have been trying to do the very same thing. I posted my project on Freelancer dot com and had two takers but they never got around to tackling the project.  I really agree that the customer needs to have a similar look and feel regardless if they are on an  LP or the company site.  My problem is that my home page is pretty fancy and uses a portrait type styling theme which is hard to duplicate in Unbounce.  I think I may just redesign my home page template for a fresh new look later this year and that will make uniformity that much easier.  Thanks for your hints. 


Thank you for this!! I used it for one of our internal pages here at unbounce!! :)


Hi Rob, 

I am Alejandra one of the designers at Unbounce! Thanks for this! I used if for one of the LP pages that I made at Unbounce! :)



Love the design of this page, Alejandra! :) 


Thanks Justin!!


Hi Rob & guys,

Does anyone know how to include the drop down menu when it switches to mobile mode?

From your examples, in mobile all your navs are hidden.

Btw, Rob your site formatting on mobile has overlapping text. Need to rearrange.



Hey. Can you explain how you used the script manager to put this on every page? I’m about to begin an initiative to adda stick-nav bar to our pages and can’t seem to figure it out. We have dozens of pages, so I’m trying to avoid having to make a navbar and drop downs on each individual page.


I am still not able to put this in. What exactly do we need to do? I don’t know much HTML or CSS.


Could somebody explain how I would go about ‘creating a div’ for each of the items, as Rob states in this original post? Is this done via custom HTML, or source code in a text box, or another way? Thanks in advance.


do you have have a tutorial about this on the unbounce forum? I tried following Rob O Connor’s instructions but I’m too newbie for this!


Hi @iriske,

You can find a lot of useful scripts and tips over here.

You might want to take a look at this one in particular.



Thank you very much Hristian. I found this page yesterday but the article about creating the hamburger menu on mobile isn’t exactly what I wanted; I’m looking to specifically create a drop down menu on my desktop page (I already have the sticky navigation bar/menu). There was one source that suggested that you could use the instructions to create a roll over image and/or tooltip but that also didn’t seem to do it.
Do you by any chance have a clear tutorial on how to create the drop-down box? I wanted to create the exact same effect as Rob O Connor’s and Alejandra’s examples (hover over the menu items and have the submenu appear)


I’m also looking for more details of how to have a dropdown menu in the header. Unfortunately the above does not give enough information to do so…(no steps aor even where to put the code)… can anyone help on this?


@David_Royer @iriske @kellypaxman @nevin

Here is a quick, step-by-step way to create a very simple drop down menu. It is the same as the following post, just with a desktop example.

Like Rob, I am not a developer and this is a drop down menu at its most basic level.

Here is an example of this on an UB template:
I only placed the drop down on the ‘Key Benefits’ button at the top each button links to the same section on the page, but of course you can change that.

  1. Create the button you wish the drop to appear on click. In this case, it is the button for ‘Key Benefits’ (Style this any way you wish)

  2. Note the Button ID (#lp-pom-button-178 for this case) - you can find this in the properties tab on the left and under the ‘Element Metadata’ section

  3. Create a box. I like to remove all styling, so I remove the border and make the background transparent. The box is where the drop down will be displayed so move it under the button you created.

  4. Note the Box ID (#lp-pom-box-638 for this case) - you can find this in the properties tab on the left and under the ‘Element Metadata’ section

  5. Start creating the additional buttons you wish to show in the drop down. Style them as you wish.

  6. Place all of the buttons in the box. This is how it will look like when the drop down is opened.

  7. Add JavaScript and replace with your IDs (don’t forget the style tags!)

  //Replace "#lp-pom-image-178" with the ID of your toggle button
  //Replace both instances of "#lp-pom-box-638" with the ID of your menu box
  $("#lp-pom-button-178, #lp-pom-box-638" ).click(function() {
  1. Add a stylesheet and place this code:
/* Replace "#lp-pom-box-638" with the ID of your menu box 
#lp-pom-box-638 {
  display: none;
  1. Save & Preview!

Again, this is very basic, but could easily be styled to look much better, but a good starting point for those who are new.

Please let me know if you have any questions!


Caroline, I’m having an application for this but I’m having an issue. Is it critical to have the box nested under the button and to have the “key benefits” nested under the box. I have a lot of trouble controlling how these things are nested. I’m looking at the view in the Contents Panel. Right now my box is not nested under the primary button, it’s at the same hierarchical level.