Bootstrap 下拉菜单，圆角不留答案

【问题标题】：Bootstrap dropdown menu, the rounded corners do not stayBootstrap 下拉菜单，圆角不留
【发布时间】：2014-05-19 16:46:52
【问题描述】：

我使用引导程序，我想制作一个带圆角的下拉菜单。下拉菜单现在有圆角，但是当我将鼠标放在其他地方时，下拉框不再有圆角。但是下拉菜单必须重新折叠起来，但下拉菜单将保持可见。

我该如何解决这个问题？我找不到任何关于此的信息。

代码见下方链接。

http://www.bootply.com/XsQRcmQSfy

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案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;
}

【讨论】：