如何添加下拉菜单图标？

Question

我有一个问题，关于在我的导航中添加一些类型的图标或指示器到具有下拉菜单的按钮。该菜单在所有浏览器中看起来都不错，只有一些小的例外。菜单本身是在Ektron CMS中构建的。我的导航中有7个按钮，其中5个有下拉菜单。正如您在我的网站上所看到的那样，我有一个小的右箭头，表示哪些按钮有下拉菜单。这个箭头是一个Unicode字符，幸运的是，在CMS的菜单控件中添加它时，它能够正常工作。我对结果感到相当满意，但我不确定这是否是创建图标的最佳方式。

有更好或更有效的方法来创建此类指示器吗？是否有一种方法可以仅在存在子菜单时分配符号或图标？

尽管我的解决方案有效，但我遇到了一个难以解决的问题。在IE7+，Chrome和Safari中，所有按钮都完美地对齐。在FireFox中，没有下拉菜单的2个按钮比有下拉菜单的按钮高4px。这发生在我添加Unicode箭头字符后。我添加了一些CSS hack来在FF中纠正这个问题，但现在我在Chrome中遇到了一个问题，最后两个按钮比其他按钮低4px。我不确定如何有效地解决这个问题。

这是我的网站链接。感谢您能提供任何帮助。

http://www.clinicaltrialsummit.com/

- noahcg

---

你能否提供一个在jsfiddle或codepen上的清晰示例？ - starikovs

这是我的jsfiddle链接。在jsfiddle中，所有按钮似乎都垂直对齐，但在我的实际网站上却不是这样。但您可以看到我正在使用的Unicode箭头，这是我的主要问题。是否有更好的方法添加此类型的菜单指示器？http://jsfiddle.net/noahcg/bs9kd/2/ - noahcg

Answer 1

尝试移除这个样式：

#nav li a:last-child[href="http://www.healthtech.com/press.aspx"] { 
    padding: 16px 0.4em 0 
}

你的默认上边距为14像素，但上面的规则为具有特定href的最后一个子元素设置了16像素的填充。

在你的jsfiddle示例中没有这个css规则。

你可以使用CSS箭头代替UTF-8符号或使用图标，但我认为像你现在这样使用UTF-8符号也是可以的。

- starikovs

Answer 2

谢谢您的回复，但我应该提到上面引用的样式是我的CSS hack。我会尝试解释一下我使用它的原因。

我需要一种方法来单独标识我的最后一个导航按钮，而无法直接将类应用于li。由于菜单本身是使用我的CMS中的控件创建的，因此HTML标记是动态生成的。我不想使用:last-child伪类，但我还需要一种仅向FF添加额外px填充的方法。我知道IE会忽略:last-child。然而，这就是我失败的地方，因为它也在Chrome和我相信Safari中添加了它。我可以将整个样式删除，这可能会帮助您更好地看到我的问题。您会发现垂直对齐在除FF之外的每个浏览器中都是正确的。

在添加我的UTF-8字符之前，整个对齐都是完美的。那时它变得不对齐，但只有在FF中。

如何添加CSS箭头？

- noahcg

---

谢谢您的建议。我刚在火狐浏览器中检查了您提供的链接，但形状并没有显示为箭头，而是显示为梯形。但在谷歌浏览器中，它们确实显示为箭头。 - noahcg