html - 混合水平和垂直 css 与 <menu><li>

Question

我正在尝试创建一个包含垂直元素和水平元素的菜单。菜单应该是这样的:

item 1    item 3    item 5    item 7
item 2    item 4    item 6    item 8

我尝试的是以下 HTML:

<menu>  
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
</menu>

和 CSS:

.navigation menu {
    float: right;
    margin-top:103px;
    width:683px;    
}
.navigation menu li {
    display:block;
    width: 115px;
    float: none;
    background-image:none;
    text-align:right;
}
.navigation menu li:nth-child(3) {
    float: left;
}
.navigation menu li:nth-child(4) {
    float: none;
}
.navigation menu li:nth-child(5) {
    float: left;
}
.navigation menu li:nth-child(6) {
    float: none;
}

但它不起作用，我认为，它对 CSS 来说太多了:)

有人知道吗？在此先感谢您的帮助!

问候Est Ro

Answer 1

你可以做的是将菜单项设置为

width:25%;

在每个菜单项上，然后将它们向左浮动。你可以摆脱其他一切。此外，不要使用菜单标签，因为它已被弃用。 :)

JSFIDDLE

http://jsfiddle.net/eERR7/

更新的 FIDDLE

http://jsfiddle.net/eERR7/2/