css - 悬停显示另一个元素

Question

我有这个html代码

  <div class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#" name="link_defineProcurement">
          <i class="fa fa-inbox icon-menu"></i>
                            1. Tab
                   </a>
          <ul class="dropdown-menu">
              <li>sub-step1</li>
          </ul>
    </div>    

这是一个标签栏，当我点击下拉菜单时，会打开一个菜单(下拉菜单)，其中包含要选择的子步骤。

到目前为止，与将鼠标悬停在下拉菜单上时相比，我通过悬停实现了颜色变化。但我想要的是，当我将鼠标悬停在下拉菜单上时，无需单击即可显示下拉菜单。

这是我的 CSS:

 .dropdown:hover {
    background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.dropdown-menu {
    width: 211px;
    border-color: #efefef;
    border-width: 3px;
    background-clip: padding-box;
    background-color: #ffffff;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    display: none;
    float: left;
    font-size: 12px;
    left: 0;
    list-style: outside none none;
    margin: 0px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

我阅读/尝试但没有成功的是在悬停时执行此操作。

 .dropdown:hover + .dropdown-menu {
    background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

有人能给我指出正确的方向吗？

还有一个问题。一旦我使悬停工作。使用此 CSS 代码，我该如何打开带有动画的下拉菜单，比方说从上到下。

Answer 1

您需要添加以下 CSS:

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

当 .dropdown 悬停时，这会将 .dropdown-menu 设置为 display: block;。

.dropdown {
    position: relative;
}
.dropdown:hover {
    background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu {
    width: 211px;
    border-color: #efefef;
    border-width: 3px;
    background-clip: padding-box;
    background-color: #ffffff;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    display: none;
    float: left;
    font-size: 12px;
    left: 0;
    list-style: outside none none;
    margin: 0px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

<div class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#" name="link_defineProcurement">
          <i class="fa fa-inbox icon-menu"></i> 1. Tab
    </a>
    <ul class="dropdown-menu">
        <li>sub-step1</li>
    </ul>
</div>