Dropdown menu when clicked it's not completely visible

Question

I'm making a custom website with a simple mobile menu for now.

In the homepage, it's all ok. In the other pages, I have some modifies which compromise the operation of the menu. It remains under the content when clicked the collection dropdown menu.

I'm trying to use different third parties menu but the issue still persists.

<ul class="main-nav page-nav">
  <li><a href="../index.html">Home</a></li>
  <li><a href="#">Bio</a></li>
  <li>
    <div class="dropdown">
      <button class="dropbtn"><a href="collection.html">Collection</a></button>
      <div class="dropdown-content">
        <a href="#">Human</a>
        <a href="#">Dog</a>
        <a href="#">Accessories</a>
      </div>
    </div>
  </li>
  <li><a href="#">Social Wall</a></li>
  <li><a href="#">Contacts</a></li>
</ul>

I need to have the menu over the content totally visible when I pass the mouse hover collection.

Answer 1

the content of .dropdown-content is limited by the height of .page-header and it would not be fixed by increasing the z-index of .dropdown-content.

So from dev tools I increased the height of .page-header from 25vh to 30vh and it shows the content of .dropdown-content, so you may want to do so

.page-header {
  height: 30vh;
}

Answer 2

Your header element has a fixed height and the overflow property set to hidden . Therefore, anything that exceeds the bounds of the element will be cropped out.

You can fix this by either:

header{
    overflow: hidden; /* removing this */
}

Or making the dropdown content fixed:

.dropdown-content{
    position: fixed; /* (i'd suggest this one) as you may need to have
                     no overflow on your header element */
}

Answer 3

I suggest you add your css aswell. I am also guessing you are using a framework based on the classnames.

Add this info to your question in order to get an efficient response.