YouTubeBlogHome

How to Make a Hover Dropdown Menu in Showit

I’ve seen a few posts and questions since I started using Showit about hover dropdown menus in the navigation. Showit doesn’t support such menus as part of their website builder, but if it’s something you really need on your website then it is possible to add your own.

This guide will show you how to add, customise and link up a hover dropdown menu with HTML and CSS. You can easily copy and paste the code into your pages and have the dropdown up and running in no time. It is intended for people with varying levels of Showit experience and technical expertise.

Step 1 - Adding the HTML

First we’ll need to add an Embed Code box into your navigation and place it where you want to position your dropdown menu.

Double click on the Embed Code box to open the Edit Code box. Then we’ll add the following HTML

<div class="dropdown">
<div class=“drop-link”>DROPDOWN NAME</div>
<div class="dropdown-content">
<a href=“/YOURPAGEURL”>LINK NAME</a>
</div>
</div>

Next we need to change the dropdown title, the links and the link titles.

First the dropdown name - this is what you will hover over to expand the dropdown. You can change the DROPDOWN NAME in bold below to your desired name.

<div class="dropdown">
<div class=“drop-link”>DROPDOWN NAME</div>
<div class="dropdown-content">
<a href=“/YOURPAGEURL”>LINK NAME</a>
</div>
</div>

Be sure not to remove the angled brackets or any of the symbols around the text.

Next we’ll start adding the link names and URL’s.

First the link name - this is what will be displayed when you hover over the dropdown name. To change this you will can edit the highlighted section below:

<div class="dropdown">
<div class=“drop-link”>DROPDOWN NAME</div>
<div class="dropdown-content">
<a href=“/YOURPAGEURL”>LINK NAME</a>
</div>
</div>

Next the URL of the page that you want to link to, you can get this either by double clicking on the page title under the pages section of the Site tab

Or, if your website has been published, by visiting the page in your browser and copying the URL slug from the address box

Now that we have our URL we need to add it to the HTML by replacing

YOURPAGEURL

<div class="dropdown">
<div class=“drop-link”>DROPDOWN NAME</div>
<div class="dropdown-content">
<a href=“/YOURPAGEURL”>LINK NAME</a>
</div>
</div>

Make sure that there is only one forward slash before the URL and that none of the quotation marks around the URL are removed.

ADDING MORE LINKS

Adding more links to your dropdown is simply a case of copy and pasting the <a href> </a> section of the HTML. So for example you would need to copy the highlighted section below and paste it directly underneath

<div class="dropdown">
<div class=“drop-link”>DROPDOWN NAME</div>
<div class="dropdown-content">
<a href=“/YOURPAGEURL”>LINK NAME</a>
</div>
</div>

So, once you’ve finished your HTML may look something like this for example:

<div class="dropdown">
<div class=“drop-link”>About Us</div>
<div class="dropdown-content">
<a href=“/about”>About</a>
<a href=“/contact”>Contact Us</a>
<a href=“/faqs”>Frequently Asked Questions</a>
<a href=“/privacy”>Privacy Policy</a>
<a href=“/terms”>T&C’s</a>
</div>
</div>

*See the additional info section below for information on adding external links and opening a link in a new tab.

Step 2 - Adding The CSS

Next we’ll add the CSS to style the dropdown. With the Edit Code box still open we will leave a space after the closing div of the HTML.

Then you can copy and paste the following CSS including the <style></style> tags

<style>
/* Dropdown Link */
.drop-link {
color: #818286;
font-size: 16px;
}

/* The container needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content*/
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
}

/* Links inside the dropdown */
.dropdown-content a {
color; #818286;
padding: 12px 16px;
display: block;
}

/* Change colour of dropdown links on hover */
.dropdown-content a:hover {background-color: #e0f0ec;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
</style>

Step 3 - Customising The Menu

Below is an overview of what each individual snippet of CSS does, so that you can alter the styles to match your website.

Note: CSS relies on semicolons to separate properties, colons to separate properties and values and curly brackets to surround the CSS declaration. If you’re having trouble with some of the CSS not working, check that all of the colons and semi-colons are all in the correct places as in the original CSS.

Adding Your Fonts

Occasionally you may need to change the font to match the font of your navigation. You will need to do this by specifying the font using CSS. You will need to get the CSS rule for the font that you’re using.

GOOGLE FONTS

If you are using Google Fonts you can get the rule for your font by visiting https://fonts.google.com.

Once you've located your font click ‘SELECT THIS FONT’:

Expand the box that appears at the bottom of the screen:

Under the Embed tab copy the CSS from the ‘SPECIFY IN CSS’ section:

Next, head back to Showit, open the Edit Code box of your dropdown menu and paste the CSS on a new line within the two areas that control the text.

These are:

/* Dropdown Link */
.drop-link {
color: #818286;
font-size: 16px;
PASTE FONT CSS HERE
}

and

/* Dropdown Content*/

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
PASTE FONT CSS HERE
}

ADOBE FONTS

If you’re using Adobe Fonts (formerly Typekit) you should follow their guide to using fonts on your website - https://helpx.adobe.com/fonts using/add-fonts-website.html.

Once set up you would paste the CSS rule in the same place as above.

MATCHING THE FONT WEIGHT

You may also need to adjust the font weight to match your current navigation text. We’ll do this by adding font-weight to the CSS. On a new line in both the .drop-link and .dropdown-content sections paste the following CSS:

font-weight: 400;

So your CSS should look something like this:
/* Dropdown Link */
.drop-link {
color: #818286;
font-size: 16px;
PASTE FONT CSS HERE;
font-weight: 400;
}

and

/* Dropdown Content*/
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
PASTE FONT CSS HERE;
font-weight: 400;
}

Depending on your font you can adjust the 400 value in 100 increments, either higher (to make the text more bold) or lower (to make the text thinner).

Remove The Navigation On Mobile

As you may know you can't hover on a touch device. There are ways to change the hover in to a clickable link, however it’s much easier to develop your mobile navigation separately. So for the purpose of this guide we’re simply going to hide our hover dropdown on mobile.

To do that click on the canvas that your dropdown is located in, then under the Canvas tab, on the top left of the screen, uncheck the mobile icon next to the ‘iFrame’ that contains your dropdown code.

Hide In Mobile View

Additional Info


SOCIAL MEDIA LINKS & OPENING LINKS IN A NEW TAB

You may want to have links to your social media accounts in a dropdown, but also keep visitors on your website. So, for example you might have a dropdown called ‘Social’ which expands to links for your Facebook, Instagram and YouTube, but when the user clicks the link it opens your Facebook page in a new tab.

To do this we’ll just need to add a small bit of HTML and the link to your social media page in the URL.

So let’s say you want to link to your YouTube channel from a dropdown.
We’d put the HTML from earlier in the article:

<div class="dropdown">
<div class=“drop-link”>DROPDOWN NAME</div>
<div class="dropdown-content">
<a href=“/YOURPAGEURL”>LINK NAME</a>
</div>
</div>

Then replace /YOURPAGEURL with the URL of your YouTube channel:

<div class="dropdown">
<div class=“drop-link”>DROPDOWN NAME</div>
<div class="dropdown-content">
<a href=“https://www.youtube.com/mrjohnocp”>LINK NAME</a>
</div>
</div>

Now you’re set up to link out to your channel, but the link will still open in the same tab. So next we need to add the HTML to open a new tab. Copy the following:

target=“_blank”

and place it after the quotation mark at the end of the URL to your channel.

<div class="dropdown">
<div class=“drop-link”>DROPDOWN NAME</div>
<div class="dropdown-content">
<a href=“https://www.youtube.com/mrjohnocp” PLACE HERE>LINK
NAME</a>
</div>
</div>

Your HTML should then look something like this:

<div class="dropdown">
<div class=“drop-link”>DROPDOWN NAME</div>
<div class="dropdown-content">
<a href=“https://www.youtube.com/mrjohnocp” target=“_blank” >LINK
NAME</a>
</div>
</div>