How to make buttons visible on top of a dropdown menu

[Nemanjavuk]

Dear everyone

I am in the process of making a website and I am stuck on a particular part. I have this website which have a lot of buttons in the top part of the website, please see screenshot one:

One of the buttons, “Markets” is a dropdown menu. When you click on it it expands and we get some items, however, the previous buttons from screenshot one is now gone, please see screenshot two:

I have the following Javascrip code which handles the dropdown logic as stated below:

document.addEventListener('DOMContentLoaded', function() {
  const dropdownButton = document.querySelector('.dropdownButton');
  const dropdownContent = document.querySelector('.dropdown-content');

  // Function to adjust the dropdown's width and position
  function adjustDropdown() {
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;
    dropdownContent.style.width = screenWidth + 'px';
    dropdownContent.style.height = (screenHeight - 200) + 'px'; // Set height
    dropdownContent.style.top = '0px'; // Start from the top of the screen
    dropdownContent.style.left = '0px'; // Align with the left edge of the viewport
  }

  // Toggle dropdown visibility and adjust width and height on button click
  dropdownButton.addEventListener('click', function(event) {
    event.stopPropagation(); // Prevent click from immediately closing the dropdown
    const isDisplayed = dropdownContent.style.display === 'block';
    dropdownContent.style.display = isDisplayed ? 'none' : 'block';
    if (!isDisplayed) {
      adjustDropdown(); // Adjust width and height only if we're showing the dropdown
    }
  });

  // Close the dropdown if the user clicks outside of it
  document.addEventListener('click', function(event) {
    const isClickInside = dropdownButton.contains(event.target) ||
                          dropdownContent.contains(event.target);

    if (!isClickInside) {
      dropdownContent.style.display = 'none';
    }
  });

  // Optional: Resize listener to adjust width and height if window size changes
  window.addEventListener('resize', adjustDropdown);
});

Also I have a CSS file, I have chosen only to paste what is appropiate for the dropdown menu:

/* Add to stylesHome.css */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  top: 0;
  width: 100%;
  z-index: 999; /* Below the top-centered buttons */
  height: calc(100vh - 200px); /* Adjusted to a more logical calculation */
}



.dropdown-content a {
  position: relative;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown-content.show {
  display: block;
}

.dropdown-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50vw; /* Move to the left edge of the viewport */
  right: -50vw; /* Extend to the right edge of the viewport */
  bottom: 0;
  background-color: #f9f9f9; /* Match the dropdown background color */
  z-index: -1; /* Ensure it's behind the content */
}

.dropdown-link {
  position: absolute;
  display: block;
  width: 300px;  /* Set the width of the clickable area */
  height: 50px; /* Set the height of the clickable area */
  padding: 0;
  line-height: 10px; /* Match the height for vertical alignment */
  box-sizing: border-box;
  overflow: hidden; /* This will clip any text that overflows */
  text-align: center; /* Center the text horizontally */
  white-space: nowrap; /* Prevent text from wrapping */
  font-size: 50px;
  z-index: 5;
}

.link1 {
  left: 10px; /* Adjust as needed */
  top: 100px; /* Same for both to align them horizontally */
}

.link2 {
  left: 400px; /* Adjust as needed */
  top: 50px; /* Same for both to align them horizontally */
}

/* Container for top and center-aligned buttons */
.top-center-buttons {
  position: relative;
  top: 20px;
  left: 500px;
  transform: translateX(-0%);
  background-color: transparent;
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 2000; /* Ensure it's the highest to bring it to the front */
}


/* Individual button styles */
.top-center-button {
  background-color: transparent;
  border: none;
  color: white;
  font-size: 20px;
  padding: 5px 10px;
  margin: 0;
  cursor: pointer;
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  vertical-align: top;   /* Ensuring top alignment */
  z-index: 2001;
}

/* Hover effect for the buttons */
.top-center-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

I have tried changing the Z-index like crazy but nothing works. Do you guys recommend anything?

Thanks in advance and have a wonderful day/ night forward.

Yours sincerely…
The Homeless Programmer

[Nemanjavuk]

Also, here is screenshot number two

[PaulOB]

We’d need to see the html and css for that whole top section as it may be a problem with a parent of the drop-down.

If for example your nav or parent had a height with overflow hidden then that could be a problem.

We at least need enough code so that we can replicate the problem.