如何添加下拉菜单图标？

我对添加某种类型的图标或指示灯到导航中具有下拉菜单的按钮有疑问。除了少数例外，菜单在所有浏览器中看起来都不错。菜单本身内置在Ektron CMS中。在我的导航中有7个按钮，其中5个有下拉菜单。正如你可以在我的网站上看到的，我有一个右箭头指示哪些有下降。箭头是一个unicode字符，在将其添加到CMS中的菜单控件中时运行良好。我对结果非常满意，但我不确定这是否是创建图标的最佳方式。如何添加下拉菜单图标？

是否有更好的或更有效的创建这种类型的指标？只有当存在子菜单时，JavaScript中才有方法分配符号或图标吗？

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

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

http://www.clinicaltrialsummit.com/

来源

2012-11-29 noahcg

你能否在jsfiddle或codepen中提供一个清晰的例子？ – starikovs

这里是我的jsfiddle的链接。所有按钮看起来都是在jsfiddle中垂直对齐，但不是在我的现场。但是你可以看到我使用的unicode箭头，这是我的主要问题。有没有更好的方式来添加这种类型的菜单指示器？ http://jsfiddle.net/noahcg/bs9kd/2/ – noahcg

查看下面的答案。 – starikovs

尝试删除该风格：

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

你有14px的默认填充顶部，但上面的规则集16像素的填充与特定HREF最后一个孩子。

在你的jsfiddle例子中没有这个CSS规则。

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

来源

2012-11-29 15:38:58 starikovs

感谢您的回应，但我应该提到，你上面引用的风格是我的CSS黑客。我会尽力解释我使用它的原因。

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

整个队列是完美的，直到我添加了我的UTF-8字符。那是它错位的时候，但只在FF。

我该如何添加CSS箭头？

来源

2012-11-29 16:20:45 noahcg

试试这个http://codepen.io/starikovs/pen/ChDdE – starikovs

感谢您的建议。我刚刚在FF中检查了你的链接，并且这些形状没有显示为箭头。它们表现为梯形。不过，它们在Chrome中显示为箭头。 – noahcg

我使用FF 16.0.2，它工作正常。 – starikovs

如何添加下拉菜单图标？

回答

相关问题