javascript - 使用 css 添加图标 :before

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

问题 2 的解决方案是将 :before 位置更改为 relative

问题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/