Mixta horizontal un CSS vertical con

Question

Estoy tratando de crear un menú con elementos horizontales verticales mixtos.Así es como debería verse el menú:

Artículo 1 Artículo 3 Artículo 5 Artículo 7
Artículo 2 Artículo 4 Artículo 6 Artículo 8

Lo que intenté es el siguiente 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>

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

Pero no funciona, creo, es demasiado para CSS :)

¿Alguien tiene una idea?¡Gracias de antemano por alguna ayuda!

saludos est ro

Answer 1

Mantenga los elementos impares que flotan a la izquierda.

Hacer que los elementos pares no tengan ningún ancho (margen derecho: -115px) y colóquelos 155 px a la izquierda y la distancia del abropiate a la parte inferior:

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

Fiddle

Answer 2

Lo que podría hacer es configurar los elementos del menú a

width:25%;

en cada uno de sus elementos de menú y luego solo flotanlos.Puedes deshacerme de todo lo demás.También como un lado, no use la etiqueta del menú está en desuso.:)

jsfiddle

http://jsfiddle.net/eerr7/

Fiddle actualizado

http://jsfiddle.net/eerr7/2/

Answer 3

tal vez algo como esto?Es un poco oxidado, pero mi ajuste lo que quieres.

Añadido algunos de los y cambiaron un poco

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

http://jsfiddle.net/jxxu8/2/