2

我想在悬停时向列表项（li）添加箭头效果，但它的位置相对于列表项不起作用。当我将 left: 50% attiribute 添加到 :after 元素时，每个单独的箭头都会以 ul 而不是列表项为中心。没有左：50% 属性，箭头在其列表项下方但不居中。所以我有点卡在这里。

这是我的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%;
           }

任何帮助将不胜感激，谢谢。

4

1 回答 1

3

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

于 2013-08-05T14:18:24.073 回答