<メニュー> を持つ垂直CSS

Question

水平アイテムを混在させたメニューを作成しようとしています。メニューがどのように見えるか：

項目1項目3項目5
項目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には多すぎる:)

誰かがアイデアを得ましたか？助けてくれてありがとう！

挨拶EST RO

Answer 1

奇数要素を左に浮遊させてください。

偶数要素には幅がありません（Margin-right：-115px）、155 pxを左側に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;
}

.

fiddle

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/