ボックス内での使用を想定した2段型のメニューです。各項目は「左 → 右 → 左 → 右」の順序で表示されます。
以下は、メニュー2つ分のコードとなります。必要な部分のみをコピーして使用してください。(clearfixをコピーし忘れないようにご注意ください)
/* --- 1番目のメニュー --- */ /* --- ボックス --- */ .section1 { width: 398px; /* ボックスの幅 */ margin: 20px 0; /* ボックスのマージン(上下、左右) */ background-color: #ffffff; /* ボックスの背景色 */ border: 1px #c0c0c0 solid; /* ボックスの枠線 */ font-size: 80%; /* ボックスの文字サイズ */ } /* --- メニューエリア --- */ .section1 .menu { width: 380px; /* メニューの幅 */ margin: 10px auto; /* メニューのマージン(上下、左右) */ padding: 0; list-style-type: none; } /* --- メニュー項目 --- */ .section1 .menu li { width: 50%; /* 項目の幅 */ padding-bottom: 3px; /* 項目の下パディング */ background: url(square.gif) no-repeat 0 1.5px; /* 項目の背景 */ float: left; } /* --- リンク --- */ .section1 .menu li a { margin-left: 10px; /* リンクエリアの左マージン */ text-decoration: none; /* テキストの下線(なし) */ } /* --- ポイント時の設定 --- */ .section1 .menu li a:hover { text-decoration: underline; /* テキストの下線(あり) */ } /* --- 2番目のメニュー --- */ /* --- ボックス --- */ .section2 { width: 398px; /* ボックスの幅 */ margin: 20px 0; /* ボックスのマージン(上下、左右) */ background-color: #ffffff; /* ボックスの背景色 */ border: 1px #c0c0c0 solid; /* ボックスの枠線 */ font-size: 80%; /* ボックスの文字サイズ */ } /* --- メニューエリア --- */ .section2 .menu { width: 380px; /* メニューの幅 */ margin: 10px auto; /* メニューのマージン(上下、左右) */ padding: 0; list-style-type: none; } /* --- メニュー項目 --- */ .section2 .menu li { width: 50%; /* 項目の幅 */ padding-bottom: 3px; /* 項目の下パディング */ background: url(folder.gif) no-repeat 0 0.9px; /* 項目の背景 */ float: left; } /* --- リンク --- */ .section2 .menu li a { margin-left: 22px; /* リンクエリアの左マージン */ text-decoration: none; /* テキストの下線(なし) */ } /* --- ポイント時の設定 --- */ .section2 .menu li a:hover { text-decoration: underline; /* テキストの下線(あり) */ } /* --- clearfix --- */ .clearFix:after { content: "."; display: block; height: 0; clear: left; visibility: hidden; } .clearFix { min-height: 1px; }
<div class="section1"> <ul class="menu clearFix"> <li><a href="#">メニュー項目1</a></li> <li><a href="#">メニュー項目2</a></li> <li><a href="#">メニュー項目3</a></li> <li><a href="#">メニュー項目4</a></li> <li><a href="#">メニュー項目5</a></li> <li><a href="#">メニュー項目6</a></li> <li><a href="#">メニュー項目7</a></li> <li><a href="#">メニュー項目8</a></li> </ul> </div> <div class="section2"> <ul class="menu clearFix"> <li><a href="#">メニュー項目1</a></li> <li><a href="#">メニュー項目2</a></li> <li><a href="#">メニュー項目3</a></li> <li><a href="#">メニュー項目4</a></li> <li><a href="#">メニュー項目5</a></li> <li><a href="#">メニュー項目6</a></li> <li><a href="#">メニュー項目7</a></li> <li><a href="#">メニュー項目8</a></li> </ul> </div>