我想在列表项目(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%;
}
任何帮助都会得到满足,谢谢。
答案 0 :(得分:3)
我会将箭头放在a
本身上,您可以将其设置为display: block
和position: relative
。然后,您拥有a:after
的定位上下文。