javascript - Css 菜单下拉

Question

我目前对我想要实现的 css 菜单缺乏想法。我想做的是我的菜单是向上的而不是向下的，但是我的测试在我的列表的顶部并且在我不再将鼠标放在它上面之前不会移动。我现在不知道该怎么做，如果有人有任何想法，我接受。谢谢你让我度过了愉快的一天。

.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 {。