Place the dropdown wherever you would like on the page and double click on the embed box to bring up the embed code to change the button link, dropdown link and title, as well as stylization for each.

In your current design, go to the desired page you would like to add your new canvas to. Click the page title in the left sidebar and from the ••• settings menu click Add From Library. Go to My Library and locate the Radiating Button Features Canvas Add On by Northfolk, select either page and the Radiating Button Features canvas, Apply My Fonts and Colors and ADD.

Nav Hover Dropdown

Instructions for your new

Preview instructions on Desktop :)

<div class="dropdown">
  <button class="dropbtn">Pages &nbsp; +</button>
  <div class="dropdown-content">
    <a href="/designer-toolkit-kit#showit-canvas-kit-volume-1">Canvas Kit V1</a>
    <hr>
    <a href="/designer-toolkit-kit#showit-canvas-kit-volume-2">Canvas Kit V2</a>
    <hr>
    <a href="/designer-toolkit-kit#showit-canvas-animations">Canvas Animations</a>
    <hr>
    <a href="/new-canvases-drop">New Canvas Drop</a>
  </div>
</div>


<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.dropbtn {
  font-family: "Poppins", sans-serif; /* NAV LINK FONT FAMILY */
  font-size: 16px; /* NAV LINK FONT SIZE */
  letter-spacing: 0em;
  line-height: 1.8u;
  text-transform: normal;
  color: #000; /* NAV LINK COLOR */
  text-align: left;
  background-color: transparent;
  border: none;
  transition: all .3s ease;
  padding-bottom: 12px; /* ADJUST PADDING UNDER NAV LINK */
  padding-left: 18px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  font-family: "Poppins", sans-serif; /* DROPDOWN FONT FAMILY */
  font-weight: 400; /* DROPDOWN FONT WEIGHT */
  font-size: 14px; /* DROPDOWN FONT SIZE */
  color: #000; /* DROPDOWN LINK COLOR */
  background-color: #eeeae1; /* DROPDOWN BACKGROUND COLOR */
  min-width: 172px;
  z-index: 1;
}

.dropdown-content a {
  display: block;
  text-decoration: none;
  padding: 10px 16px 10px 16px;
}

.dropdown:hover .dropbtn {
  color: #434336; /* NAV LINK HOVER COLOR */
  background-color: transparent; /* NAV LINK COLOR */
  transition: all .3s ease;
}

.dropdown-content a:hover {
  color: #434336; /* DROPDOWN LINK HOVER COLOR */
  background-color: transparent; /* DROPDOWN LINK COLOR */
  cursor: pointer;
}

.dropdown:hover .dropdown-content {
  display: block;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid #fff; /* DROPDOWN DIVIDER COLOR */
}
</style>

<a href="www.yoururl.com">Dropdown Link Title</a>

you can delete the <hr> if you do not want divider lines