使用css添加图标：之前答案

【问题标题】：Adding icon using css :before使用css添加图标：之前
【发布时间】：2013-11-26 11:13:31
【问题描述】：

我正在为 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;  
}

问题：

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

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

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案1】：

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

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

【讨论】：

您可以改为从 css 中删除 position 和 top 以获得相同的结果。另外，第一个 css 规则中有一个错字： Missing a g in padding-top
感谢 Johan，但我更喜欢设置位置以避免误导情况。编辑“填充”;-)

【解决方案2】：

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

A fiddle.

【讨论】：