时间戳

首页 > 解决方案 > Css 菜单下拉菜单

javascript - Css 菜单下拉菜单

问题描述

我目前对我想实现的 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

标签： javascripthtmlcssweb

解决方案

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

推荐阅读