Question

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

我正在使用大部分标准bootstrap导航，只是改变了一些样式。子菜单会立即下降并显示，但我希望它能够滑出。查询对我来说可能有点太过分了，所以我一直在寻找淡出的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（不是＆＃34; hiden ＆＃34;）
您的选择器不正确：.sub-menu ul:hover适用于.sub-menu子元素的列表元素。但实际上，当您将鼠标悬停在.sub-menu - 元素时，您希望对li执行某些操作。

将这些作为可能的CSS选择器使用：

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

注意

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

Bootstrap子菜单向下滑动

2 个答案: