CSS菜单下拉

Question

目前我对于实现css菜单的想法缺乏，我希望我的菜单是向上弹出而不是向下，但是我的“TEST”始终在列表顶部，并在鼠标移出后不再移动。我目前不知道如何实现，如果有人有任何想法，欢迎提供。祝您度过愉快的一天。

.span1 {
  background-color: #e83737;
  color: white;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  top: 413px;
  left: 120px;
  width: 192px;
  height: 68px;
  font-size: 20px;
}

.span1:hover {
  background-color: #e83737;
  position: absolute;
  left: 120px;
  top: 123px;
  width: 192px;
  height: 68px;
  font-size: 20px;
}

.dropdown ul li:hover ul {
  height: initial;
  bottom: 100%;
  overflow: visible;
  background: lightgray;
}

.dropdown-child {
  display: none;
  background-color: #f28c8c;
  position: absolute;
  width: 192px;
  top: 190px;
  left: 120px;
}

.dropdown-child a {
  color: white;
  padding: 20px;
  text-decoration: none;
  display: block;
}

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

<div class="dropdown">
  <span class="span1">TEST</span>
  <div class="dropdown-child">
    <a href="">abc</a>
    <a href="">abc</a>
    <a href="">abc</a>
    <a href="">abc</a>
  </div>
</div>

Codepen演示：https：//codepen.io/tiboo__/pen/XWjoeQB

- TibooxF

Answer 1

子绝对定位块必须有一个相对定位的父元素。 在你的CSS中添加这个：

.dropdown {
  position: relative;
}

.span1 的定位规则如下：

top: 0;
left: 0;

此外，一些选择器中包含了额外的规则和选择器。

.dropdown {
  position: relative;
}

.span1 {
  background-color: #e83737;
  color: white;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  top: 0;
  left: 0;
  width: 192px;
  height: 68px;
  font-size: 20px;
}

.dropdown ul li:hover ul {
  height: initial;
  bottom: 100%;
  overflow: visible;
  background: lightgray;
}

.dropdown-child {
  display: none;
  background-color: #f28c8c;
  width: 192px;
}

.dropdown-child a {
  color: white;
  padding: 20px;
  text-decoration: none;
  display: block;
}

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

<div class="dropdown">
  <span class="span1">TEST</span>
  <div class="dropdown-child">
    <a href="">abc</a>
    <a href="">abc</a>
    <a href="">abc</a>
    <a href="">abc</a>
  </div>
</div>

- s.kuznetsov

---

谢谢，我会稍后尝试。 - TibooxF

Answer 2

不确定我是否理解您想要实现的内容，但请尝试将.span1:hover {更改为.dropdown:hover .span1 {。

- dfvc

---

谢谢，我稍后会尝试。 - TibooxF