javascript - 如何添加下拉菜单图标？

Question

我有一个关于向导航中具有下拉菜单的按钮添加某种类型的图标或指示器的问题。除了少数异常(exception)，该菜单在所有浏览器中看起来都不错。菜单本身内置于 Ektron CMS 中。我的导航中有 7 个按钮，其中 5 个有下拉菜单。正如您在我的网站上看到的那样，我有一个小右箭头指示哪些有下拉菜单。箭头是一个 unicode 字符，在 CMS 的菜单控件中添加它时幸运地起作用。我对结果相当满意，但我不确定这是否是创建图标的最佳方式。

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

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

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

http://www.clinicaltrialsummit.com/

Answer 1

尝试删除此样式:

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

您有 14px 的默认填充顶部，但上面的规则为具有特定 href 的最后一个子项设置了 16px 的填充。

在您的 jsfiddle 示例中没有此 css 规则。

您可以使用 css 箭头代替 UTF-8 符号或使用图标，但我认为像您一样使用 UTF-8 符号是可以的。