在相对定位的元素中未显示溢出

Question

因此，我只是试图创建一个下拉菜单。我注意到，如果我添加相对于.menu-item的位置，则不会显示溢出。另外，当.menu-item位置设置为静态和/或初始时，我可以将.drop-down-box元素放置在所需的位置。也就是说，如果我设置left：50％，然后将其的50％转换为居中，则它将结束。

我理解这是因为绝对定位的元素是相对于具有非静态位置的最近祖先进行定位的。无论如何，我如何才能仅使用CSS将下拉列表显示以及定位在我想要的位置。 （不要试图冒充大写字母，只是不想使用javascript之类的任何解决方案。我知道如何使用javascript做到这一点）

谢谢！

#navigation {
  position: relative;
  border-bottom: 1px solid #d0d0d0;
  overflow: visible;
}

#nav-box {
  overflow: auto;
}

#logo-box {
  position: relative;
  margin: 15px 7.5px;
  font-size: 1.5em;
  font-weight: 400;
  float: left;
}

.base-box {
  width: auto;
  float: left;
  overflow: hidden;
}

.menu {
  margin: 0 auto;
  overflow: hidden;
}

.menu-box {
  display: block;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

.omni-box {
  margin: 8.5px 12.5px;
  overflow: hidden;
  float: right;
}

.menu-tag {
  display: block;
  position: relative;
  padding: 21.5px 12.5px;
  font-size: smaller;
  cursor: pointer;
}

.menu-tag-plus:after {
  content: '\0020';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 75%;
  right: 50%;
  color: inherit;
  font-size: 1.5em;
  line-height: 1em;
  background-image: url("http://jenjeloo.com/resources/general/arrow-down.svg");
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-transition: transform .25s ease-in;
  -moz-transition: transform .25s ease-in;
  transition: transform .25s ease-in;
  -webkit-transform: translate(50%, -50%);
  -moz-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  cursor: pointer;
}

.menu-item {
  display: inline-block;
  vertical-align: middle;
}

.menu-item:hover .menu-drop-box {
  -webkit-transition: max-height .25s ease-in;
  -moz-transition: max-height .25s ease-in;
  transition: max-height .25s ease-in;
}

.menu-drop-box {
  min-width: 285px;
  position: absolute;
  max-height: 0;
  position: absolute;
  -webkit-box-shadow: 0 2.5px 5px 0px #e0e0e0;
  -moz-box-shadow: 0 2.5px 5px 0px #e0e0e0;
  box-shadow: 0 2.5px 5px 0px #e0e0e0;
  background: #f7f8f9;
  visibility: hidden;
  overflow: hidden
}

.menu-drop {
  margin: 25px;
}

.menu-drop-item {
  margin: 12.5px 0;
  padding: 2.5px;
  white-space: nowrap;
  overflow: auto;
}

.menu-drop-icon {
  width: 25px;
  height: 25px;
  padding: 7.5px;
  float: left;
}

.menu-drop-tag {
  display: block;
  padding: 5px 0;
  text-indent: 8.5px;
  font-size: smaller;
  overflow: hidden;
  cursor: pointer;
}

.menu-item:hover .menu-drop-box {
  max-height: 1000px;
  visibility: visible;
}

#keyword {
  width: 90%;
  height: 42.5px;
  display: block;
  position: relative;
  border: 1px solid #e0e0e0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  overflow: hidden;
  z-index: 9;
}

.menu-switch {
  width: 50px;
  height: 50px;
  padding: 0;
  margin: 5px;
  background-image: url("http://jenjeloo.com/resources/general/menu.svg");
  background-size: 50% 50%;
  float: right;
}

#navigation.expanded {
  width: 100%;
  height: 100%;
  position: fixed;
}

#navigation.expanded .menu-switch {
  background-image: url("http://jenjeloo.com/resources/general/crossmark.svg");
}

#navigation.expanded .base-box {
  position: fixed;
  z-index: 49;
}

#navigation.expanded .menu-box {
  display: block;
  margin-top: 60px;
  z-index: 9;
}

.menu-switch {
  display: none;
}

<nav id="navigation">
  <div id="nav-box">
    <div class="base-box chalk-brush">
      <a id="logo-box"><label class="tomato-stroke">Jenjeloo</label></a>
      <button class="menu-switch back-image"></button>
      <!--<div class="omni-box"><input type="text" id="keyword" class="jenjeloo"/></div>
      	</div>-->
      <div class="menu-box chalk-brush">
        <ul class="menu">
          <li class="menu-item">
            <div class="">
              <label class="menu-tag menu-tag-plus">Textbooks</label>
              <div class="menu-drop-box chalk-brush">
                <ul class="menu-drop">
                  <li class="menu-drop-item">
                    <img class="menu-drop-icon shadowed round" src="https://image.flaticon.com/icons/svg/204/204197.svg" />
                    <a class="menu-drop-tag lead-stroke" href="">Sell Textbooks</a>
                  </li>
                  <li class="menu-drop-item">
                    <img class="menu-drop-icon shadowed round" src="https://image.flaticon.com/icons/svg/321/321798.svg" />
                    <a class="menu-drop-tag lead-stroke" href="">Buy Textbooks</a>
                  </li>
                  <li class="menu-drop-item">
                    <img class="menu-drop-icon shadowed round" src="https://image.flaticon.com/icons/svg/179/179507.svg" />
                    <a class="menu-drop-tag lead-stroke" href="">Backpack</a>
                  </li>
                </ul>
              </div>
            </div>
          </li>

          <li class="menu-item">
            <label class="menu-tag menu-tag-plus">Housing</label>
            <div class="menu-drop-box chalk-brush">
              <ul class="menu-drop">
                <li class="menu-drop-item">
                  <img class="menu-drop-icon shadowed round" src="https://image.flaticon.com/icons/svg/149/149064.svg" />
                  <a class="menu-drop-tag lead-stroke" href="">Search Places</a>
                </li>
                <li class="menu-drop-item">
                  <img class="menu-drop-icon shadowed round" src="https://image.flaticon.com/icons/svg/438/438507.svg" />
                  <a class="menu-drop-tag lead-stroke" href="">Host</a>
                </li>
              </ul>
            </div>
          </li>

          <li class="menu-item">
            <label class="menu-tag menu-tag-plus">Account</label>
            <div class="menu-drop-box chalk-brush">
              <ul class="menu-drop">
                <li class="menu-drop-item">
                  <img class="menu-drop-icon shadowed round" src="https://image.flaticon.com/icons/svg/237/237188.svg" />
                  <a class="menu-drop-tag lead-stroke" href="">Help</a>
                </li>
                <li class="menu-drop-item">
                  <img class="menu-drop-icon shadowed round" src="https://image.flaticon.com/icons/svg/265/265674.svg" />
                  <a class="menu-drop-tag lead-stroke" href="">Logout</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
</nav>

https://jsfiddle.net/gacci/Lqchd4jk/9/