Jump to content

Coding a dropdown menu

Recommended Posts

I'm working on a non-live template and i'm trying to add a custom code for a dropdown menu and when I change from my preview and refresh it the placement of my code has moved from the original spot to the center of my screen.
At times they will show up correctly with three duplicate menus in the center and others ! only have one in the correct place and all the others are centered on my page.


This is the code that I am placing on the custom css area

.dropbtn {
  background-color: #524f4f;
  color: white;
  padding: 16px;
  font-size: 25px;
  border: none;
  cursor: pointer;
.dropdown {
  position: relative;
  display: center;
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
.dropdown-content a:hover {background-color: #black;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #black;}

This is the code that I am using for the specific page

<div class="dropdown">
  <button class="dropbtn">rtu's</button>
  <div class="dropdown-content">
    <a href="#">allen bradley</a>
    <a href="#">idec</a>
    <a href="#">phoenix contact</a>
    <a href="#">roc</a>
    <a href+"#">totalflow</a>

Link to comment
  • Replies 6
  • Views 1.4k
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.