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

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/

标签： htmlcss