htmlcssmybb

Problems with positioning a dropdown menu

I've come up with a problem I never had, that is z-index. Interestingly enough, I can't make the drop-down menu of E10 Info overlap on "container" and "content" divs. I tried high z-indices but with no success. Can anyone help me out on what I'm doing wrong? The website's URL is http://forum.economy10.com/ And some of my code:

<head>
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 16px;
      z-index: 2000000;
      min-height:400px;
    height:400px;
    }

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

        .dropdownd {
      position: relative;
      display: inline-block;
    }

    .dropdown-contentd {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 16px;
      z-index: 1;
    }

    .dropdownd:hover .dropdown-contentd {
      display: block;
    }

  </style>
</head>
<div class="header">
  <div class="longo"></div>
  <a name="top" id="top"></a>
  <div class="wrapper">
    <div class="logo">
      <a href="{$mybb->settings['bburl']}/index.php"><i class="fa fa-bolt" style="color: #fcb941;"></i> {$mybb->settings['homename']}</a>
    </div>
    <!-- If you want to use Image based logo, uncomment this               <div class="logo">
 <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" title="{$mybb->settings['homename']}" alt="{$mybb->settings['homename']}"></a></div>    
    -->

    <ul id="menu">
      <li><a href="https://economy10.com/"> Home </a></li>
      <li><a href="http://forum.economy10.com/"> Forums </a></li>
      <li>
        <div class="dropdown">
          <a href="#" class="e10i"> E10 Info </a>
          <div class="dropdown-content">
            <ul>
              <li><a href="https://economy10.com/details/"> E10 Overview </a></li>
              <li><a href="https://economy10.com/list-of-suppliers/"> List of Suppliers </a></li>
            </ul>
          </div>
        </div>
      </li>
Solution

  • Its not being covered up it is being cut off because you have overflow set to hidden on your header. Just remove that and you will be able to see your dropdown menu.

    .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #FFFFFF;
    color: #DDD;
    z-index: 10000;
    height: 100px;

    //remove the following line
    overflow: hidden;

    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    text-align: center;
    line-height: 0px;
}