Bootstrap下拉菜單，圓角不留

Question

我使用bootstrap，我想制作一個帶圓角的下拉菜單。 下拉菜單現在有圓角但是當我把鼠標放在其他地方時，下拉框就再也沒有圓角了。 但是下拉菜單必須重新折疊，但下拉菜單將保持可見狀態。

我該如何解決這個問題？ 我找不到任何關於此事的內容。

請參閱以下鏈接以獲取代碼。

http://www.bootply.com/XsQRcmQSfy

Answer 1

將此添加到您的CSS

.navbar-default .nav .dropdown .dropdown-menu {
    -webkit-border-radius: 5px 5px 5px 5px ;
    -moz-border-radius: 5px 5px 5px 5px ;
    border-radius: 5px 5px 5px 5px ;    
    background-color: 000;  
    margin-top: -3px;
    margin-left: 0px;
    border: none;
    width: 160px;
}

在你選擇它之前

.navbar-default .nav .dropdown:hover .dropdown-menu {

所以它只是被設置了

:hover

或者...實際上添加更改：

.navbar-default .nav .dropdown:hover .dropdown-menu {
    -webkit-border-radius: 5px 5px 5px 5px ;
    -moz-border-radius: 5px 5px 5px 5px ;
    border-radius: 5px 5px 5px 5px ;    
    background-color: 000;  
    margin-top: -3px;
    margin-left: 0px;
    border: none;
    width: 160px;
}

添加你想要的一個選擇器

.navbar-default .nav .dropdown:hover .dropdown-menu,
.navbar-default .nav .dropdown .dropdown-menu,
 {
    -webkit-border-radius: 5px 5px 5px 5px ;
    -moz-border-radius: 5px 5px 5px 5px ;
    border-radius: 5px 5px 5px 5px ;    
    background-color: 000;  
    margin-top: -3px;
    margin-left: 0px;
    border: none;
    width: 160px;
}