html - 为事件链接对齐 css 三 Angular 形

Question

我正在尝试为悬停在链接上创建一个三 Angular 形，但我的三 Angular 形总是显示在链接下方的一个 Angular 上。谁能告诉我确切的问题在哪里？

Fiddle

 #navcontainer a:hover::after {
            background: white;
            border: solid black;
            border-width: 1px 1px 0 0;
            bottom: -5px;
            content: ' ';
            display: block;
            height: 10px;
            left: 32px;
            position: absolute;
            width: 10px;
            z-index: 99;
            -webkit-transform: rotate(-45deg);
            -webkit-transform-origin: 50% 50%;
        }

Answer 1

您要做的是将悬停效果应用到 LI 而不是 A。

#navcontainer li:hover::after {

代替

#navcontainer a:hover::after { 

您还需要将 LI 的显示类型更改为 inline-block 并为其指定高度(减去 UL 的 padding top)，最后指定包含箭头的相对位置。

    #navcontainer ul li {
        display: inline-block;
        height:35px;
        position:relative;
    }

现在是悬停。我们知道它有 10px 宽，所以要将它居中放置，我们进行计算，宽度的 50% - 5px(箭头宽度的一半)；

    #navcontainer li:hover::after {
        background: white;
        border: solid black;
        border-width: 1px 1px 0 0;
        bottom: -5px;
        content: ' ';
        display: block;
        height: 10px;
        left: calc(50% - 5px);
        position: absolute;
        width: 10px;
        z-index: 99;
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: 50% 50%;
    }

箭头现在应该正确定位。