Jquery 引导子菜单向下滑动

我正在使用bootstrap构建Wordpress模板，网站如下：

我使用了很多标准的引导导航，只是做了一些风格上的改变。子菜单会立即下降并出现，但我希望它滑出。查询对我来说可能有点太远了，所以我一直在寻找一个淡出CSS选项

这是我目前的导航CSS

/* subnav */

@media (min-width:768px) {
    .sub-menu {
        display: none;
        position: absolute;
        background: #222;
        padding: 10px 15px;
        width: 200px;       
    }

    li:hover .sub-menu {
        display: block;
    }

}

.sub-menu li {
    margin-bottom: 10px;
    list-style: none;
}

.sub-menu li:last-child {
    margin-bottom: 0;
}

.sub-menu a  {
    color: #999;
    text-decoration: none;
}

.sub-menu a:hover  {
    color: #fff;    
}   

.sub-menu {
    background-color: #2194ec;
    z-index: 20;
}

.sub-menu li {
    margin-bottom: 10px;
    list-style: none;
}

.sub-menu li:last-child {
    margin-bottom: 0; 
}

.sub-menu a  {
    color: #c5e4fc;
    text-decoration: none;
}

.sub-menu a:hover  {
    color: #fff;    
}   

.current-menu-item > a, .current-menu-parent > a {
    color: #fff;
    background-color: #00468A;
}

.current-menu-parent .current-menu-item a {
    color: #fff;
}

下面是我试图添加的代码，用于制作菜单：

.sub-menu ul {
    opacity: 0; 
    top: 30px; 
    visibility: hiden; 
}

.sub-menu ul:hover {
    opacity: 1; 
    top: 60px; 
    visibility: visible; 
    transition: all .25s ease; 
}

但它似乎没有任何效果，无论我把它放在哪里

---

如果有一个简单的Jquery解决方案，我不介意试一试

实际上，您可以通过以下两种方式之一来实现这一点。您可以使用Jquery.slidedown来帮助您完成这一任务。您可以在

上阅读有关如何使用和示例的更多信息。您的代码应该可以正常工作，但这里有两件事需要提及：

• 可见性

  的可能值为

  隐藏

  （非“隐藏”）
• 您的选择器不正确：

  .sub-menu ul:hover

  适用于作为

  .sub-menu

  子元素的列表元素。但实际上，当您将鼠标悬停在它的父元素

  li

  -上时，您需要使用

  .sub菜单
  执行一些操作

尽可能使用以下CSS选择器：

.nav.navbar-nav > li .sub-menu {}    
.nav.navbar-nav > li:hover .sub-menu {}

注意

---

当您设置

转换时：所有.25秒轻松仅适用于
：悬停
菜单将隐藏而不显示动画。如果您在第一个选择器中设置它，它在离开元素时也会移动和褪色。
如果您可以发布一个JSFIDLE，这样我们就可以帮助您编写代码，那就太好了。非常感谢您的帮助-我已经回答了，因为它不会让我在这个评论中发布太多文本-希望没问题。