Home Affiliate Marketing Tools ClickFunnels: How to Make a Dropdown Menu (Using CSS)

ClickFunnels: How to Make a Dropdown Menu (Using CSS)

by Ivan

What the dropdown navigation bar looks like: 0:35

Options you should change within the CSS based on your site: 1:31

What’s up?!

In this video, I provide you with a CSS/HTML code for a dropdown menu that you can simply copy and paste within your ClickFunnels site in the javascript element slot.

Watch the video to see the different CSS options you should change to suit your particular site, such as the title of the menu headings, dropdown options, scroll features, color of the background, color of the text, etc…

Literally all you need to do is copy the code I provide you in the comments section and post it in the right spot and you’ll be good to go!

Check out the video for more details!

Here is the code you can just copy and paste:

<style>
/* do not change */

.container{
overflow: unset; 
}
ul{
margin:0px;
padding:0px;
list-style-type:none;
display:inline-block;
}
ul li ul li{
display:none;
}
/* can change */

#container{
text-align:center;
}
ul li{
background-color:white;
border: 1px solid green;
width:130px;
height:30px;
line-height:30px;
float:left;
text-align:center;
margin:5px;
border-radius:25px;
}
ul li a{
color:black;
text-decoration:none;
display: block;
  font-size:20px;
  font-family:verdana;
}
ul li a:hover{
background-color:red;
text-decoration:none;
  border-radius:25px;
  color:white;
}
ul li:hover ul li{
display:block;
margin-left:0px;
}
</style>
<div id="container">
<ul>
<li><a href='#scroll-section1'>Monkeys</a></li>
<li><a href='#scroll-section2'>Option 1</a>
 <ul>
  <li><a href='#scroll-section2'>Option a</a></li>
      <li><a href='https://www.amarketingessentials.com'>Option b</a></li>
 </ul>
</li>
<li><a href='#scroll-section3'>Option 2</a></li>
<li><a href='#'>Option 3</a></li>
<li><a href='#'>Option 4</a></li>
</ul>
</div>

That’s it!

Disclosure: I am an independent ClickFunnels Affiliate, not an employee. I receive referral payments from ClickFunnels. The opinions expressed here are my own and are not official statements of ClickFunnels or its parent company, Etison LLC.

Like my Facebook page! https://www.facebook.com/onlinemarketingessentials

If you are interested in ClickFunnels, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
https://tinyurl.com/14-day-free-clickfunnels-trial

If you like GetResponse and want to learn more, try out their 30-day free trial under my affiliate link at:
http://www.getresponse.com/index/Ambition

If you are interested in ClickMagick, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://www.bestlinktracker.com/ClickMagick/wp-cf-dropdown

Here is my Namecheap affiliate link as well if you want to buy one of their really cheap domains and/or private email:
https://www.namecheap.com/?aff=108439

Thanks for watching, and I’ll see you in the next video!

related articles

6 comments

victor April 7, 2019 - 7:25 pm

Wow, thanks so much for this. It’s been a really helpful man

Reply
Ivan April 19, 2019 - 2:50 pm

You are very welcome, thanks for the awesome comment!

Reply
David July 17, 2019 - 8:10 pm

Thank you for this! Hi, how do I make sure the menu list appears over the elements under? I have a menu with 4 elements and when dropped down it goes below the button I have below the menu. Thanks in advance!

Reply
Ivan July 19, 2019 - 6:45 pm

Hey David!

I don’t have too in-depth coding knowledge, but if you send me your page with the code to ivan@amarketingessentials.com, I can take a look. The issue most likely has something to do with the rest of the code on your page.

Reply
Matthew November 10, 2019 - 11:25 pm

what about on mobile

Reply
Ivan November 11, 2019 - 3:41 pm

Would need more coding to get that!

Reply

Leave a Comment

Top

WAIT! BEFORE YOU GO...

250+ FREE Technical Marketing Videos Available

Weekly Updates! Check Them Out!