如何添加下拉菜单图标？答案

【问题标题】：How do I add a drop down menu icon?如何添加下拉菜单图标？
【发布时间】：2012-11-17 15:11:47
【问题描述】：

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

有没有更好或更有效的方法来创建这种类型的指标？只有在存在子菜单的情况下，JavaScript 才有办法分配符号或图标吗？

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

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

http://www.clinicaltrialsummit.com/

【问题讨论】：

你能在 jsfiddle 或 codepen 中提供一个清晰的例子吗？
这是我的 jsfiddle 的链接。所有按钮似乎都在 jsfiddle 中垂直对齐，但在我的实时站点上却没有。但是您可以看到我正在使用的 unicode 箭头，这是我的主要问题。有没有更好的方法来添加这种类型的菜单指示器？ jsfiddle.net/noahcg/bs9kd/2

标签： javascript css drop-down-menu content-management-system

【解决方案1】：

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

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

在我添加 UTF-8 字符之前，整个对齐方式都很完美。那是它变得错位的时候，但仅在 FF 中。

如何添加 CSS 箭头？

【讨论】：

感谢您的建议。我刚刚检查了你在 FF 中的链接，形状没有显示为箭头。它们显示为梯形。不过，它们在 Chrome 中确实显示为箭头。

【解决方案2】：

尝试删除此样式：

#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符号是可以的。

【讨论】：