Question

我想在列表项目（li）上添加箭头效果，但是它的位置不会相对于列表项目起作用。当我添加左：50％attiribute to：在元素之后，每个箭头都以ul为中心而不是它的列表项。没有左：50％attiribute，箭头在他们的列表项目下但没有居中。所以我有点被困在这里。

这是我的CSS：

nav.main-nav 
{
    position: absolute;
    z-index: 100;
    width: 980px;
}
    nav.main-nav > ul > li
    {
        position: relative;
        display: table-cell;
        list-style-type: none;            
        vertical-align: middle;
     }
     nav.main-nav > ul > li:hover
     {
         background-color: #304a60;
     }

          nav.main-nav > ul > li:hover:after
          {
                content: "";
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #304a60;
                position: absolute;
                bottom: -10px;
                left: 50%;
           }

任何帮助都会得到满足，谢谢。

Answer 1

我会将箭头放在a本身上，您可以将其设置为display: block和position: relative。然后，您拥有a:after的定位上下文。

CSS：元素相对位置之后

1 个答案: