引导子菜单滑下

我使用引导到继承人建立一个WordPress模板网站：http://ideedev.co.uk/flowmech/引导子菜单滑下

我使用了很多标准引导资产净值的，只是一些风格的变化。子菜单下降并立即出现，但我希望它滑出。查询对我来说可能有点太远了，所以我一直在寻找一个淡出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的，我不介意给它一个去...

来源

2015-04-27 Shaun Taylor

如果您可以发布jsfiddle，那么我们可以帮助您处理您的代码，那将会很棒。 –

您实际上可以通过以下两种方法之一来完成这一操作。你可以使用Jquery .slidedown来帮助你完成这个任务。你可以阅读更多关于如何使用和例如在http://api.jquery.com/slidedown/

来源

2015-04-27 15:41:49

您的代码应该工作正常，但有两件事情要在这里提到：

为visibility可能的数值是hidden（不是“隐伏 “）
您的选择器不正确：.sub-menu ul:hover可用于作为.sub-menu的子元素的列表元素。但实际上，当您将它徘徊在父母li -element中时，您希望使用.sub-menu做些事情。当您设置transition: all .25s ease;只为:hover菜单将没有动画隐藏
```
.nav.navbar-nav > li .sub-menu {}  
.nav.navbar-nav > li:hover .sub-menu {} 
```
注意

：

使用这些尽可能CSS选择器。如果您将其设置在第一个选择器中，它在离开元素时也会移动并淡入。

来源

2015-04-27 15:47:39 insertusernamehere

非常感谢您的回应 - 我已经回复了答案，因为它不会让我在评论中张贴太多文字 - 希望没关系。 –

引导子菜单滑下

回答

相关问题