CSS:元素相对位置之后

时间:2013-08-05 13:56:22

标签: css css3 css-position

我想在列表项目(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%;
           }

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

1 个答案:

答案 0 :(得分:3)

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