我有一个小插入符号，我正在使用某个菜单项上的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; 
}

我有是的，我想中心的每个插入符号（菜单项的尺寸/宽动态的问题，而且还保持悬停子菜单我在这里发生

这里的完整性是IA满工作示例（不插入符号修复） - 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％的页面宽度）。有没有什么办法可以让我的中心脱口而不是搞乱我的子菜单？

来源

2016-10-18 ajmajmajma

您可以更改要创建插入符号的相对容器。例如，它移动到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; 
}

CodepenDemo

来源

2016-10-18 21:57:43 DaniP

居中伪元素“脱字号”没有相对位置

回答

CodepenDemo

相关问题