Смешанный горизонтальный вертикальный CSS с помощью

Question

Я пытаюсь создать меню со смешанным вертикальным горизонтальным элементами.Вот как следует выглядеть меню:

Пункт 1 Пункт 3 Пункт 5 Пункт 7
Пункт 2 Пункт 4 Пункт 6 Пункт 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 :)

У кого-нибудь есть идея?Заранее спасибо за любую помощь!

Приветствуется ro

Answer 1

Держите нечетные элементы, плавающие влево.

Сделать даже элементы не имеют ширины (маржа-право: -115px) и положите их 155 px влево и апропиемое расстояние до нижней части:

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

.

Widdle

Answer 2

Что вы можете сделать, это установить пункты меню на

width:25%;

.

на каждом из ваших пунктов меню, а затем просто плавать на них.Вы можете избавиться от всего остального.Также как сторона не используйте тег меню, это устарено.:)

<Сильные> jsfiddle

http://jsfiddle.net/eerr7/

<Сильные> Обновленные скрипки

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

Answer 3

Может быть, что-то вроде этого?Это немного ржаво, но это моя подходящая то, что вы хотите.

Я добавил некоторые из и изменил немного

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

.

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