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

Question

如何在以下示例Fiddle

中添加三角形

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

我尝试添加以下css，但我在snot工作

.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脚本。另外，最后添加了一种风格请参考此链接 fiddle

我添加的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的列表项，然后您可以将伪元素应用于该项。

Codepen Example

Answer 3

我通过添加额外的.arrow_div ans应用css尝试了一些东西，检查menuone你会看到黑色箭头，可能是你要找的，更好的建议有一个背景图像有箭头并设置为你menudiv背景

SAMPLE DEMO