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

<center>
<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>
  </div>
</div>
  </center>

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

I have a current site that is live on one template and i'm redoing it in a new template...

Is there a way that I can send you a link to my site without putting my changes live in the new template?

Edited by Jdirks
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.