html - 下拉菜单在 ebay 上不起作用

Question

我有以下下拉菜单：http://jsfiddle.net/McKgU/如您所见，它工作正常。然而，当在 eBay 上时，布局到处都是。

Answer 1

您正在为所有无序列表和列表项设置样式。什么！？您需要使您的选择器非常具体，这样您就不会干扰页面上的现有样式。

您可以将所有内容包装在一个 div 中，然后使用子选择器选择 ul 和 li。

或者，既然您已经有一个 ul#menu，请在 CSS 中使用它。ul#menu { ... }这只会对具有“菜单”ID 的 ul 元素进行样式设置。如果页面也有带有菜单 id 的 ul，我仍然会将 id 从菜单更改为更具体的内容。

参考：选择器

Answer 2

试试这个：http: //jsfiddle.net/McKgU/5/

我做了什么：

1) 在你的“菜单”id前面加上#NOINTERFERE00_

为什么？由于“菜单”是 ids/classes/whatever 的一个相当常见的名称选择，因此页面上存在具有相同名称的另一个元素的可能性非常高。这可确保您的“菜单”与页面上任何其他 ID 为“菜单”的元素之间没有干扰（css 或 js）。

2) 我在每个 CSS 声明的末尾添加了 !important。

为什么？您插入此页面的作者也很可能具有针对 ul、li 和 a 的样式。这可以确保您的优先（除非作者在他自己的样式表上使用了重要的。在大多数情况下他不应该，但可能会。）

我没有做的：

3）将原作者的样式表应用的所有样式重置为ul、li和a的。（我仍在寻找更好的方法）

Scoped CSS以更优雅的方式解决了问题 1 和 2。但是，我相信目前只有 Chrome 支持。