CodepenDemo

Question

我在一些菜单项目上使用了一个小插入符号用于hoverstate。悬停只是添加了一个名为menu-caret的小类，我添加了一个伪元素来添加一点插入符号。

carret的css看起来是这样的：

.menu-caret::before {
    content:"";
    position: absolute;
    margin-left: 20px;
    bottom: 0;
    width: 0%;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}

我遇到的问题是，我想将每个插入符号放在中心（菜单项的大小/宽度是动态的，但也保持了我在这里使用的悬停子菜单的完整性

这是一个完整的工作示例（没有插入符号修复） - http://codepen.io/ajmajma/pen/KgGxWL

我知道我可以这样做：

    ul {
  width: 100%;
  position: relative;
  display: inline-block;
  list-style-type: none;
}
li {
  padding: 20px;
  float: left;
  position: relative;
}
.menu-caret::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  margin-left: -5px;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

但是在添加相对位置时，它会混淆子菜单大小（应该是100％页面宽度）。有没有办法让一个居中的插入符号而不会弄乱我的子菜单？

Answer 1

您可以更改要在其上创建插入符的相对容器。例如，将其移至a标记：

.menu-caret > a::after {
  content:"";
  position: absolute;
  left:50%;
  margin-left: -5px;
  bottom: -10px;
  width: 0%;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}
.menu > ul > li a {
  position: relative;
}

将伪元素“插入符号”居中，没有位置相对

1 个答案:

CodepenDemo