Bootstrap子菜单向下滑动

Question

我正在使用bootstrap来构建一个Wordpress模板，这里是站点：http://ideedev.co.uk/flowmech/

我使用了很多标准的bootstrap nav，只是做了一些风格上的改变。子菜单弹出并立即出现，但我希望它滑出。查询可能对我来说有点太远了，所以我一直在寻找一个淡出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解决方案，我不介意尝试一下……

Answer 1

实际上，您可以通过以下两种方法之一来完成此操作。您可以使用Jquery .slidedown，它将帮助您完成此任务。您可以在http://api.jquery.com/slidedown/上阅读有关如何使用和示例的更多信息

Answer 2

您的代码应该工作得很好，但这里有两件事需要提一下：

• visibility的可能值是hidden (不是“hiden”)
• 您的选择器不正确：.sub-menu ul:hover适用于作为.sub-menu的子元素的列表元素。但实际上，当悬停它的父li-element.

时，您想要对.sub-menu做一些事情

使用以下内容作为CSS选择器：

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

便笺

当您为:hover设置transition: all .25s ease; only时，菜单将隐藏，而不显示动画。如果你在第一个选择器中设置它，它也会在离开元素时移动和淡入淡出。