在引导导航栏中更改下拉菜单的形状答案

【问题标题】：change the Shape of drop down menu in bootstrap navbar在引导导航栏中更改下拉菜单的形状
【发布时间】：2017-11-27 12:04:25
【问题描述】：

我想将引导导航栏的下拉菜单设置为如下图所示的样式，但是上方的锚点（我在上传的图片中在其周围放置了一个蓝色圆圈）没有出现。我应该在我的 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;
        }

【问题讨论】：

创建一个 sn-p 或 fiddle 以便更轻松地向您展示如何执行此操作。
bootsnipp.com/snippets/Vm7d

标签： css asp.net twitter-bootstrap navbar

【解决方案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 类的 div

在此处查看实际操作：fiddle

【讨论】：