jquery - 使用css在子菜单之前添加三角形

Question

如何将三角形添加到以下示例小提琴

我需要删除带有白色背景的父菜单并显示三角形以使其看起来更像这样

我试图添加以下css，但我没有工作

.dropdown li:first-child > a:after {
{
    content: '';
    position: absolute;
    left: 10px;
    top: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #0A8F36;
    opacity:0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

更新：

我设法使它在某种程度上工作，但仍然有一些设计问题，任何帮助表示赞赏

最新小提琴http://jsfiddle.net/wPWDm/17/

Answer 1

希望这会有所帮助，我已经注释掉了您的一些 css 和 jquery 脚本。另外，最后添加了一个样式，请参考这个链接小提琴

我添加的CSS如下，

.dropdown ul li:first-child > a:after {
 content: '';
 position: absolute;
 left: 30px;
 top: -8px;
 width: 0;
 height: 0;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-bottom: 8px solid #028F41;
 }

Answer 2

您需要将一个类应用于具有下拉 div 的列表项，然后您可以将伪元素应用于该列表项。

代码笔示例

Answer 3

我已经通过添加额外的.arrow_div ans apply css 来尝试一些东西，检查 menuone 你会看到黑色箭头，可能是你正在寻找的，更好的建议有一个带有箭头的背景图像并将其设置为你的 menudiv 背景

示例演示