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

Bootstrap下拉菜单，圆角不留

1 个答案: