更改bootstrap导航栏中下拉菜单的形状

Question

我想设置bootstrap导航栏的下拉菜单，如下图所示，但上面的锚点（我在上传的图片中放了一个蓝色的圆圈）没有出现。我应该添加到我的CSS中来绘制它？

请帮帮我

我的Css

li.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown {
position:relative;
}

.dropdown>.dropdown-menu {
 -webkit-border-radius:0 6px 6px 6px;
 -moz-border-radius:0 6px 6px 6px;
  border-radius:0 6px 6px 6px;
  border-color:red;

        }

.dropdown:hover>.dropdown-menu {
            display:block;
        }

Answer 1

要达到此效果，您可以添加一个小方块，然后将其绝对放置在您想要的位置，然后将其旋转45度。然后在方块的顶部和左侧添加边框：

CSS

.square {
    position: absolute;
    top: -6px;
    left: 10px;
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(0,0,0,.15);
    border-left: 1px solid rgba(0,0,0,.15);
    background-color: #fff;
    transform: rotate(45deg);
}

将方形div添加到您的html：

HTML

<ul class="dropdown-menu">
    <div class="square"></div>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    <li class="divider"></li>
    <li><a href="#">One more separated link</a></li>
</ul>

要将此添加到页面上的其他下拉菜单，只需在内部添加一个带有.square类的

在此处查看此行动：fiddle