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-menu悬停时，这会将display: block;设置为.dropdown。

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

Answer 2

试试这个

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

<强> FIDDLE EXAMPLE

用悬停显示另一个元素

2 个答案: