将三角形指针添加到导航项/菜单底部的中心

Posted 2023-05-08

【中文标题】将三角形指针添加到导航项/菜单底部的中心

【英文标题】：Adding triangle pointer to the center of bottom of nav-item/menu

【发布时间】：2021-04-04 01:49:48

【问题描述】：

一旦菜单悬停/激活，我想在我的水平菜单底部添加一个白色三角形。然而，三角形不是在菜单的中心对齐，而是在最右边的角落。如果我添加 css "left: 50%;"，它会转到菜单栏（/屏幕）的中心。这是代码sn-p： html:

  <div class="navbar-collapse collapse">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link text-white">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-white">Privacy</a>
                        </li>
                    </ul>
                </div>

css:

  li.nav-item a:hover::after 
        content: "";
        height: 0;
        width: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fff;
        position: absolute;
     /*left:50%;*/
        bottom: 0;
    

更新1：如下图所示，三角形位于“主页”的右下角，应该是菜单下方的中心。将鼠标悬停在“隐私”上也是如此。

Update2：将“.text-center”添加到“li”或“a”将不起作用。

TIA。

【问题讨论】：

你有任何关于你想要达到的目标的陈述或图纸吗？

您是否忘记在a 中添加position:relative？

@sharun k k 添加截图

@Paulie_D "position: relative" 将把三角形放在菜单栏底部大约 4px 处，它仍然在菜单的右侧。

【参考方案1】：

终于用上了：

display: block; 
position: relative; 
left: 50%; 
bottom: -10px;

在上面的CSS中让它工作。

我还删除了导航栏的填充并将“pt-1”添加到“li”）。 我不知道为什么display: block; 有效。