Display：block不堆叠导航元素

Question

我在使nav元素真正表现得像块元素时遇到一些麻烦。我试图用nav和标签代替通常的ul和li标签制作菜单。那没有按计划进行。我的菜单互相显示，好像display：block css无效。我想将菜单堆叠起来，而不要一个个显示。

HTML：

<nav id="mainmenu">
    <a href="#">Item1</a>
    <a href="#">Item2</a>
    <a href="#">Item3</a>
<nav>
<nav id="submenu">
    <a href="#">Item1</a>
    <a href="#">Item2</a>
    <a href="#">Item3</a>
<nav>

CSS：

nav{
    display: block;
}

编辑：

这是我希望设置的方式，但我更希望将a元素浮动，这样就不会出现inline-block的间距问题。

http://jsfiddle.net/Kpv5H/2/

我仍然不明白为什么当nav元素被阻止时，浮动a标签会使所有标签内联显示？

http://jsfiddle.net/Kpv5H/4/

[如果我松开a标签，它们会正确对齐，但会丢失a标签顶部和底部的填充。如果我添加display：block以更正所有标签堆叠在彼此之上。如果尝试使用浮点数来纠正此问题，请按以下步骤：内联显示。

标签上的内嵌块似乎可以解决此问题，但随后出现间距问题。

是否有一种方法可以堆叠nav元素并使a元素浮动并仍然保留对a元素的填充？

Answer 1

编辑： * （在OP添加更多详细信息之后） *

[使用INLINE-BLOCK技术：

通过使用inline-block，如果您在font-size:0px;中设置了nav（具有inline-block元素的主容器），那么您将不会获得由inline-block引起的额外间距

SEE DEMO

没有在font-size:0px;中添加nav，它将看起来像这样：

SEE DEMO

[使用FLOAT技术：

您需要添加overflow:hidden和width以防止您的nav元素浮动。

[请在下面查看CSS中的更改：

nav {
    display: block;
    overflow:hidden; /* Added */
    width: 100%; /* Added */
}

nav a {
    float: left;
    padding: 2em;
}​

SEE DEMO

Answer 2

这是我要做的事情

nav a{
    display: block;
}