Dropdown opens on background - dropdown

Question

I just created my fist dropdown, so far so good. the dropdown opens. Below the dropdown button is text and images in a container.
When i click the dropdown button, the list is behind the text and images that is in the container. How do I bring the dropdown list to the foreground?
<td bgcolor="white" height="50">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><FONT face="Verdana" color=#026991 size=2><b>Onze diensten</b></button>
<div id="myDropdown" class="dropdown-content">
<b>Link 1</b>
<b>Link 2</b>
<b>Link 3</b>
<b>Link 4</b>
<b>Link 5</b>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.contains('show');
}
}
}
}
</script>
CSS:
/* Dropdown Button */
.dropbtn {
background-color: white;
color: #026991;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: white;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: #026991;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: white}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

Answer 1

Try changing your HTML like this. `
<td bgcolor="white" height="50">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><FONT face="Verdana" color=#026991 size=2><b>Onze diensten</b></button>
<div id="myDropdown" class="dropdown-content">
<select>
<option href="#"><b>Link 1</b></option>
<option href="#"><b>Link 2</b></option>
<option href="#"><b>Link 3</b></option>
<option href="#"><b>Link 4</b></option>
<option href="#"><b>Link 5</b></option>
</select>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.contains('show');
}
}
}
}
</script>
`
And also note that in the code you have posted here. You haven't mentioned where your CSS is. you can add that by
<link rel="stylesheet" href="styles.css">
.

Answer 2

Ok. After reading your comments I understood what are your requirements clearly. Then I did a little bit research on "Expand dropdown programmatically in html" . Then I read following stackoverflow question and answersQ1 , Q2. Most of the contributors to those answers have mentioned that there is no way to do that in HTML. Provided code examples were also not working. (Complaints can be seen on comments also). Then I came up with the method below to fulfill your two requirements. Though it uses buttons to show dropdown , it works as a normal HTML dropdown. The only problem is that you have to keep enough space below the button so that Expansion does not affect other html elements in the design.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var val=document.getElementById("btn1").value;
if(val=="0"){
document.getElementById("btn1").value=1;
a
jQuery('#content').toggle('show');
}
else{
document.getElementById("btn1").value=0;
jQuery('#content').toggle('hide');
document.getElementById("btn1").value=0;
}
});
});
</script>
</head>
<body>
<div name="drop-down">
<button id="btn1" value="1">Show/Hide</button>
<div id="content" hidden>
<button id="btn11" value="0">Link1</button>
</br>
<button id="btn12" value="0">Link2</button>
</br>
<button id="btn13" value="0">Link3</button>
</br>
<button id="btn14" value="0">Link4</button>
</br>
</div>
</div>
<p id="demo"></p>
</body>
</html>

Answer 3

I have a solution for you that is in CSS3.
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 4;
}
"z-index" is basically what layer that one thing is.