OLS - How to build a dropdown menu on your website

Many clients who have multiple locations like to create a dropdown menu on the booking landing page to direct users to the correct location specific booking page. We will provide a basic option for this scenario that you can repurpose on your own site.

This requires you have access to your website editor and the ability to add CSS and HTML code.

This simple dropdown menu with clickable links requires two sections of code be added to the site.

Styling Code: CSS is used to control many aspects of a website from style to positioning. The sample content here can be further explored by visiting www.w3schools.com. You can copy this code in the header section at the top of the page between the <head> and </head> tags or directly above the code in the next step.

<style>
.dropbtn {
  font-weight: 600;
  text-transform: uppercase;
  font-family: Montserrat,sans-serif;
  background-color: transparent;
  padding: 8px 29px 8px 20px;
  font-size: 13px;
  line-height: 1em;
  border-radius: 5px;
  cursor: pointer;
} 
.dropdown {position: relative;display: inline-block;} 
.dropdown-content {
  font-family: Montserrat,sans-serif;
  font-size: 13px;
  font-weight: 700;  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 275px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; 
} 
.dropdown-content a {
  color: black;
  padding: 10px;
  text-decoration: none;  display: block;
  font-family: Montserrat,sans-serif;
  font-size: 13px;
  font-weight: 700; 
} .dropdown:hover 
.dropdown-content {display: block;} 
.dropdown-content a:hover {background-color: #cccccc} 
.dropdown:hover .dropbtn {background-color: #eeeeee;} 
</style>

The HTML code would be added to the section of the page in which you want the button to appear. Update lines 4-7 to list your locations where our example list Location 1 through Location 4. Update each corresponding locations booking page URL where you see the google.com reference.

<div class="dropdown">
  <button class="dropbtn">Select a Location</button>
    <div class="dropdown-content"> 
<a class="locationLink" href="https://www.google.com">Location 1</a> 
<a class="locationLink" href="https://www.google.com">Location 2</a> 
<a class="locationLink" href="https://www.google.com">Location 3</a> 
<a class="locationLink" href="https://www.google.com">Location 4</a>
  </div></div>