Question

我一直在苦苦寻找底层菜单。

所以：我在页脚中有一个菜单，当悬停时会显示元素，目前它会显示下降，但出于阅读目的，我希望它上升

我已经尝试了几件事（基于我在这里发现的例子），但我无法让它工作

我做了一个jsfiddle测试事情并告诉你什么事情：http://jsfiddle.net/xyasu950/2/

我知道我必须使用

bottom:100%; position:absolute;

任何线索的人？

Answer 1

我已更新您的JSFIDDLE。我想你想要这个。

＆＃13;

#footer .button {
  position: relative;
}
#footer .submenu {
  position: absolute;
  bottom: 20px;
  width: 100%;
  background-color: #FF0000;
  padding: 0;
  z-index: 1000;
  max-height: 0;
  border: 0 none;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  -webkit-transition: max-height 0.2s ease-out 0s;
  -moz-transition: max-height 0.2s ease-out 0s;
  transition: max-height 0.2s ease-out 0s;
  a {
    padding: 8px 10px;
    min-width: 220px;
    text-align: center;
    font-weight: normal;
    text-transform: initial;
  }
}
#footer .submenu li {
  position: relative
}
#footer > .submenu > ul {
  bottom: 0%;
  transition: bottom 0.1s;
}
#footer .submenu:hover {
  position: absolute;
  bottom: 100%;
}
#footer .button:hover > .submenu {
  max-height: 300px;
  bottom: 100%
}
#social-top .submenu li {
  display: block;
  font-size: 0.7em;
}

＆＃13;

<footer id="footer" style="margin-left:50px;">
  <div class="button">
    <div style="margin-top:50px;">Hover me</div>
    <ul class="submenu">
      <li><a href="">Hey</a>
      </li>
    </ul>
  </div>
</footer>

＆＃13;

变换下拉到下拉

1 个答案: