CSS misto horizontal e vertical com <menu><li>

Question

Estou tentando criar um menu com itens mistos verticais e horizontais.É assim que o menu deve ficar:

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

O que eu tentei foi o seguinte 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>

E 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;
}

Mas não funciona, eu acho, é demais para CSS :)

Alguém tem uma ideia?Agradecemos antecipadamente por qualquer ajuda!

Saudações Est Ro

Answer 1

Mantenha os elementos estranhos flutuando para a esquerda.

Faça com que os elementos pares não tenham largura (margem direita:-115px) e posicione-os 155 px à esquerda e a distância apropriada para baixo:

CSS

.menu {
    float: left;
    margin-top:13px;
    width:683px;    
}
.menu li {
    display:block;
    width: 115px;
    float: left;
    background-image:none;
    text-align:right;
}

.menu li:nth-child(even) {
    position: relative;
    top: 1.2em;
    left: -115px;
    margin-right: -115px;
}

violino

Answer 2

O que você pode fazer é definir os itens do menu como

width:25%;

em cada um dos itens do menu e depois flutuá-los para a esquerda.Você pode se livrar de todo o resto.Além disso, como complemento, não use a tag de menu, pois ela está obsoleta.:)

JSFIDDLE

http://jsfiddle.net/eERR7/

VIOLINO ATUALIZADO

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

Answer 3

Talvez algo assim?Está um pouco enferrujado, mas cabe no que você deseja.

Eu adicionei um pouco e mudei um pouco

.navigation menu li:nth-child(6) {
    float: none;
}

http://jsfiddle.net/JXxU8/2/