Mixed horizontal an vertical css with <menu><li>

Question

I'm trying to creat a menu with mixed vertical an horizontal items. That's how the menu should look like:

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

What i tried ist the following 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>

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

But it doesn't work, i think, it's too much for CSS :)

Anybody got an idea? Thanks in advance for any help!

Greetings Est Ro

Answer 1

What you could do is set the menu items to

width:25%;

on each of your menu items and then just float them left. You can get rid of everything else. Also as a side do not use the menu tag is it deprecated. :)

JSFIDDLE

http://jsfiddle.net/eERR7/

UPDATED FIDDLE

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

Answer 2

Maybe something like this? It's a little bit rusty but it my fit what you want.

I added some of the and changed a bit

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

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

Answer 3

Keep the odd elements floating left.

Make the even elements have no width (margin-right: -115px) and position them 155 px to the left and the apropiate distance to the bottom:

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