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

Answer 1

不确定我是否得到了您想要实现的目标，但尝试将 .span1:hover { 更改为 .dropdown:hover .span1 {。

Answer 2

子绝对块必须有一个相对定位的父级。 将此添加到您的 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>