Hi Adam
I don't think it is right but the code I am using is -
<div class="dropdown">
<button class="dropbtn">Hibiscus Coast Business Directory Sections</button>
<div class="dropdown-content">
<a href="https://www.linku2hibiscuscoast.co.nz/hibiscus-coast-local-business-quick-guide.html">Coast Local Quick Business Links</a>
<a href="https://www.linku2hibiscuscoast.co.nz/hibicus-coast-business-features.html">Business Features</a>
<a href="#">Link 3</a>
</div>
</div>
<br />
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #F67606;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 300px;
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: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #0056d6;}
</style>
</head>
<body>
<h3>Click Above for Business Directory Sections</h3>
<p>These lead to our second level categories</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
For some reason it only works showing two buttons which is annoying and the top button is the only one that works - I did at one stage get it to work with 4 menus but I have about 17 to add to the drop down.
I was going to do a hover button but understand this is not good for mobile viewers so think perhaps it is best to have a button that is clicked on for the drop down to appear. I'd really appreciate your help
Sarah
