I am in the process of creating my website using only HTML code (no bootstrap). I want to implement a Dropdown List with a list of specifications. However, I am encountering an issue where once the list is opened, the content below does not adjust accordingly and ends up overlapping with the list. Please refer to this image to see the problem: https://i.sstatic.net/9cHop.png
The desired outcome should look something like this: https://i.sstatic.net/pwH2Z.png
In the ideal scenario, when I open the Dropdown List, the content below should automatically move down (unfortunately, I cannot directly copy this behavior from Bootstrap as I am limited to using only HTML).
Here is a snippet of my HTML code:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
Below is the CSS code that corresponds to the above HTML:
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Additional styles here */
And lastly, here is the JavaScript function associated with the Dropdown functionality:
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown 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.remove('show');
}
}
}
}
</script>