css - html5自定义内联水平菜单

Question

[编辑]请注意，这不是重复的主题，尽管它与前一个主题围绕同一主题。[/编辑]

就在一两天前，我创建了一个类似的线程，并得到了一些急需的答案，但由于线程没有太多重点，我希望你能原谅这次重写，可以这么说。

所以基本上我以前做过这个，正如我发现的那样，有一些有问题的方法，我现在应该已经修复了。除此之外，我不再使用 display: table-cell，而是使用 display: inline-block。

那么问题是什么呢？好吧，我想达到某种程度的完美，因为我很容易混淆，我非常希望你们中的一些人看一下并提出您的意见和建议。也许花几分钟帮我整理 CSS 等。

现在我没有期望，我意识到我不是唯一有需要的人，但如果你有时间，我将非常感激。这是一个工作示例的链接。 http://jsfiddle.net/7fD4S/

html 应该没问题，虽然这让我很恼火，因为我可能无法显示列表，因为它会影响内联 block 属性，但我可以接受。

关于 CSS，如前所述，我很容易混淆自己。我认为 CSS 需要整理一下，但老实说我做不到。

总而言之，我想我只是想得到认可。它已正确完成，没有重大问题等。

应该注意的是，这只适用于 IE9 和其他更新的浏览器。一切顺利，可能会包括对 IE8 的支持，但尚未确定。

好吧，就这些。

希望您能花几分钟仔细查看一下，在此先感谢您，并致以最诚挚的问候。

编辑:更新示例:http://jsfiddle.net/7fD4S/1/

编辑:更新示例:http://jsfiddle.net/7fD4S/2/将顶部位置从 21 像素更改为 20 像素以避免出现间隙。

Answer 1

我唯一真正注意到的是你应该改变:

header div {
    top: 21px;
}

到

header div {
    top: 20px;
}

否则在 1px 边界处有一个死区似乎不会触发 :hover 效果，因此会使其变得不稳定。