引導子菜單滑下

我使用引導到繼承人建立一個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

非常感謝您的迴應 - 我已經回覆了答案，因爲它不會讓我在評論中張貼太多文字 - 希望沒關係。 –

引導子菜單滑下

回答

相關問題