使用css添加图标：之前

Question

我正在为WordPress使用superfish菜单。我想在菜单父项和它的下拉列表之间添加一些边距，并希望在下拉列表的顶部添加一个图标，以便它看起来像下面的图像：

菜单标记由WordPress自动生成，因此无法更改。我正在尝试使用CSS但它似乎不起作用：

ul > li ul.subs{
    margin-top: 10px;
}

ul > li ul.subs:before{
    content: " ";
    display: block;
    height: 10px;
    width: 20px;
    position: absolute;
    top: 0;
    background: url('http://i.imgur.com/NL4Rq2S.png') no-repeat center bottom;  
}

问题：

1. 当我悬停时，子菜单消失
2. 不会出现箭头图标。

演示： http://jsfiddle.net/y9Rk9/

Answer 1

使用ul > li ul.subs {padding-top: 10px;}代替margin-top: 10px;

A fiddle

Answer 2

问题2的解决方案是将位置改为相对

问题1的解决方案是使菜单高度更高

ul > li ul.subs{
padding-top: 10px;
}

ul > li ul.subs::before{
    content: " ";
    display: block;
    height: 10px;
    width: 20px;
    position: relative;
    top: 0;
    background: url('http://i.imgur.com/NL4Rq2S.png') no-repeat center bottom;  
}

http://jsfiddle.net/y9Rk9/11/