Css 用鼠标悬停显示另一个元素

我有这个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>    

我读过/尝试过但没有成功的是在悬停状态下这样做

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

有人能给我指一下正确的方向吗

---

还有一个问题。一旦我让悬停生效。有了这个CSS代码，我如何打开带有动画的下拉菜单，比如说从上到下

您需要添加以下CSS：

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

这将设置

。下拉菜单

为

显示：块当
下拉列表
悬停时


。下拉列表{
位置：相对位置；
}
.下拉列表：悬停{
背景：线性渐变（到底部，#fcfc 0%，#efeff 30%）重复滚动0 0 rgba（0,0,0,0）；
}
.下拉菜单：悬停.下拉菜单{
显示：块；
}
.下拉菜单{
宽度：211px；
边框颜色：#efefef；
边框宽度：3倍；
背景剪辑：填充框；
背景色：#ffffff；
边界半径：0 0 7px 7px；
盒影：0 6px 12px rgba（0,0,0,0.176）；
显示：无；
浮动：左；
字体大小：12px；
左：0；
列表样式：外部无；
利润率：0px0；
最小宽度：160px；
填充：5px0；
位置：绝对位置；
最高：100%；
z指数：1000；
}


子步骤1

试试这个

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

我用这个问题再问一件不相关的事情。如果你知道怎么做，那就太好了，再次感谢你！
.dropdown:hover .dropdown-menu {
   display: block;
}