Bootstrap下拉菜单，圆角不留

Question

I use bootstrap and I want to make a dropdown menu with rounded corners. The dropdown menu now has rounded corners but when I put the mouse somewhere else the dropdown box has no round corners anymore. But the dropdown menu has to collapse back up, but the dropdown menu will stay visible.

How can I fix this problem? I can't find anything about this.

See the link below for the code.

http://www.bootply.com/XsQRcmQSfy

Answer 1

add this to your 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;
}

before you had it with selectors

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

so it was only being set with the

:hover

or... just actually add change :

.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;
}

to add the one selector you want

.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;
}