Html 底部三角形与边框悬停

基本上，我有这个布局，我试图使三角形与边界出现在悬停

ul{
背景：#ccc；
填充：20px；
}
ulli{
显示：内联块；
填充：20px；
}
ul a{
文字装饰：无；
}
ul li：悬停a{
边框底部：1px纯白；
}

您可以使用

css pseudo

元素来实现这一点。 检查代码段

ul{
背景：#ccc；
填充：20px；
}
ulli{
显示：内联块；
填充：20px；
位置：相对位置；
}
ul a{
文字装饰：无；
}
ul li：悬停a{
边框底部：1px纯白；
}
ul li：悬停a：在{
内容：''；
位置：绝对位置；
底部：15px；
左：0；
右：0；
保证金：0自动；
宽度：0；
身高：0；
边框顶部：实心5px#fff；
左边框：实心5px透明；
右边框：实心5px透明；
}

您可以使用

css pseudo

元素来实现这一点。 检查代码段

ul{
背景：#ccc；
填充：20px；
}
ulli{
显示：内联块；
填充：20px；
位置：相对位置；
}
ul a{
文字装饰：无；
}
ul li：悬停a{
边框底部：1px纯白；
}
ul li：悬停a：在{
内容：''；
位置：绝对位置；
底部：15px；
左：0；
右：0；
保证金：0自动；
宽度：0；
身高：0；
边框顶部：实心5px#fff；
左边框：实心5px透明；
右边框：实心5px透明；
}

ul{
背景：#ccc；
填充：20px；
}
ulli{
显示：内联块；
填充：20px；
位置：相对位置；
}
ul a{
文字装饰：无；
}
ul li：悬停a{
边框底部：1px纯白；
位置：相对位置；
}
ul li:悬停a：：之后{
位置：绝对位置；
内容：“；
左边框：5px实心透明；
右边框：5px实心透明；
边框顶部：8px纯白；
左：39%；
顶部：18px；
}

JS-Bin

ul{
背景：#ccc；
填充：20px；
}
ulli{
显示：内联块；
填充：20px；
位置：相对位置；
}
ul a{
文字装饰：无；
}
ul li：悬停a{
边框底部：1px纯白；
位置：相对位置；
}
ul li:悬停a：：之后{
位置：绝对位置；
内容：“；
左边框：5px实心透明；
右边框：5px实心透明；
边框顶部：8px纯白；
左：39%；
顶部：18px；
}

JS-Bin

这可以在不设置li的“位置：相对”的情况下完成吗？我在父UL中有许多嵌套UL，这会弄乱这些嵌套UL。这可以在不设置li的“位置：相对”的情况下完成吗？我在父UL中有许多嵌套UL，它把那些嵌套UL搞乱了。