在引导程序导航栏中更改下拉菜单的形状

debugcn 发表于 Dev

用户

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

咖啡豆

要实现此效果，您可以添加一个小方块，然后将其绝对放置在您想要的位置，然后将其旋转 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

在这里看到它的实际效果：小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。