Question

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

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

虽然我的解决方案有效但有一个问题我无法解决。在IE7 +，Chrome和Safari中，所有按钮都完美对齐。在FireFox中，没有下拉菜单的2个按钮比具有下拉菜单的按钮高4个像素。一旦我添加了unicode箭头字符就会发生这种情况。我添加了一个小的CSS黑客，纠正了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符号。

Answer 2

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

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

在我添加UTF-8角色之前，整个路线都很完美。那时它变得不对齐，但仅限于FF。

我如何添加CSS箭头？

如何添加下拉菜单图标？

2 个答案: