高度不会因内容而扩大

Question

我创建了一个小菜单，并使用Stratum.js将行很好地放置在菜单项上。

如果您单击Privat，则可以看到菜单已打开，但其中没有显示某些内容，我想这是由于position: relative和position: absolute之间的关系

我已经尝试了很多在StackOverflow上找到的解决方案，但是没有一个使它起作用。

以下是我尝试过的一些内容：

Position: absolute and parent height?
Make absolute positioned div expand parent div height

有人知道我该如何解决这个问题，以便在打开菜单时可以看到整个菜单。

所需外观：Desired look of menu

$(function() {
  $('[class^="gridmenu"]').each(function() {
    $(this).stratum({
      columns: 5,
      smart: false
    });
  });
});
$(".menu .main a").click(function() {
  var id = $(this).attr("data-menuId");

  var submenu = $('.menu .megamenu .mainmenu-level2-ul[data-id="' + id + '"]');
  var allSubmenu = $(".menu .megamenu .mainmenu-level2-ul");

  if (submenu.is(":visible")) {
    allSubmenu.hide();
  } else {
    allSubmenu.hide();

    submenu.show();
  }
});

body {
  margin: 0;
  padding: 0;
  background-color: #000;
}

.menu {
  background-image: none;
  background-color: #003673;
  padding: 5px;
  min-width: 1280px;
  height: 50px;
  z-index: 1000;
  position: relative;
}

.menu .main {
  width: 1280px;
  margin: 0 auto;
}

.menu .main ul {
  margin: 0;
  padding: 0;
  margin-left: 260px;
  list-style: none;
}

.menu .main ul li {
  float: left;
  margin-right: 50px;
  position: relative;
}

.menu .main ul li a {
  line-height: 40px;
  color: #fff;
  font-weight: bold;
  font-size: 1.3em;
  text-decoration: none;
  cursor: pointer;
}

.menu .main ul li.active a {
  color: #d0d060;
}

.menu .megamenu-cont {
  display: block;
  position: absolute;
  width: 100%;
  top: 50px;
  left: 0;
  background-color: #fff;
  z-index: 10;
}

.menu .megamenu-cont .megamenu {
  width: 977px;
  margin: 0 auto;
}

.menu .megamenu-cont .megamenu .mainmenu-level2-ul {
  padding: 25px 0 20px 0;
  display: none;
  position: relative;
  margin-bottom: 20px;
}

.menu .megamenu-cont .megamenu .mainmenu-level2-ul .mainmenu-level2-li-root {
  margin-top: -22px;
  border-bottom: 1px solid #b7b7b7;
  font-size: 1.2em;
}

.menu .megamenu-cont .megamenu .mainmenu-level2-ul .mainmenu-level2-li-root a {
  font-weight: bold;
  font-size: 1.3em;
  padding: 15px 0 5px 0;
  display: block;
  color: #000;
  line-height: 15px;
  text-decoration: none;
}

.menu .megamenu-cont .megamenu .mainmenu-level2-ul .mainmenu-level2-li .megamenuitem {
  width: 180px;
  position: absolute;
}

.menu .megamenu-cont .megamenu .mainmenu-level2-ul .mainmenu-level2-li>a {
  font-weight: bold;
  font-size: 1.3em;
  padding: 15px 0 5px 0;
  display: block;
  color: #000;
  line-height: 15px;
  text-decoration: none;
}

.menu .megamenu-cont .megamenu .mainmenu-level2-ul .mainmenu-level2-li .mainmenu-level3-ul .mainmenu-level3-li {
  margin-bottom: 5px;
}

.menu .megamenu-cont .megamenu .mainmenu-level2-ul .mainmenu-level2-li .mainmenu-level3-ul .mainmenu-level3-li a {
  text-decoration: none;
  color: #000;
  font-weight: normal;
  line-height: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Masonry-Grid-Layout-Stratum/stratum.min.js"></script>

<div class="menu">
  <div class="main">

    <ul>
      <li>
        <a data-menuid="1109">Privat</a>
      </li>
      <li>
        <a data-menuid="1113">Erhverv</a>
      </li>
      <li>
        <a data-menuid="1108">Netbank</a>
      </li>
    </ul>

  </div>
  <div class="megamenu-cont">
    <div class="megamenu">
      <div class="mainmenu-level2-ul" data-id="1109">
        <div class="mainmenu-level2-li-root">
          <a href="/da/privat/">Privat</a>
        </div>
        <div class="gridmenu1109" style="position: relative;">
          <div data-grid-item="" style="position: absolute; width: 20%; padding: 10px; transition: all 0.4s ease 0s; left: 0%; top: 0px;">
            <div class="mainmenu-level2-li">
              <a href="/da/privat/netbank/">Netbank</a>
              <div class="mainmenu-level3-ul">
                <div class="mainmenu-level3-li">
                  <a href="/da/privat/netbank/tilmelding/">Tilmelding</a>
                </div>
                <div class="mainmenu-level3-li">
                  <a href="/da/privat/netbank/sikkerhed/">Sikkerhed</a>
                </div>
                <div class="mainmenu-level3-li">
                  <a href="/da/privat/netbank/netbank-abningstider/">Netbank åbningstider</a>
                </div>
                <div class="mainmenu-level3-li">
                  <a href="/da/privat/netbank/priser/">Priser</a>
                </div>
                <div class="mainmenu-level3-li">
                  <a href="/da/privat/netbank/hjaelp/">Hjælp</a>
                </div>
              </div>
            </div>
          </div>
          <div data-grid-item="" style="position: absolute; width: 20%; padding: 10px; transition: all 0.4s ease 0s; left: 20%; top: 0px;">
            <div class="mainmenu-level2-li">
              <a href="/da/privat/selvbetjening/">Selvbetjening</a>
              <div class="mainmenu-level3-ul">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mainmenu-level2-ul" data-id="1113">
        <div class="mainmenu-level2-li-root">
          <a href="/da/erhverv/">Erhverv</a>
        </div>
        <div class="gridmenu1113" style="position: relative;">
          <div data-grid-item="" style="position: absolute; width: 20%; padding: 10px; transition: all 0.4s ease 0s; left: 0%; top: 0px;">
            <div class="mainmenu-level2-li">
              <a href="/da/erhverv/netbank/">Netbank</a>
              <div class="mainmenu-level3-ul">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mainmenu-level2-ul" data-id="1108">
        <div class="mainmenu-level2-li-root">
          <a href="/da/netbank/">Netbank</a>
        </div>
        <div class="gridmenu1108" style="position: relative;">
        </div>
      </div>
    </div>
  </div>
  <div class="burger"></div>
</div>