Webテンプレート/リスト・メニュー/2段メニュー2

ボックス内での使用を想定した2段型のメニューです。各項目は「左上 → 左下 → 右上 → 右下」の順序で表示されます。

floatを指定して、ul要素を横に並べています。
リンクテキスト左のマークは、li要素の背景に設定されています。
マークの大きさに合わせて、背景画像の表示位置や項目の左パディングを微調整する必要があります。
リンクテキスト下の間隔は、項目の下パディングで指定することができます。（マージンではなくパディングで指定しておいた方が無難です）
このサンプルでは、枠線を含めたボックスの幅は400pxになります。

使用している画像

square.gif

folder.gif

※画像へは直接リンクしないでください。（ダウンロードしてから使用してください）

コード

以下は、メニュー2つ分のコードとなります。必要な部分のみをコピーして使用してください。（clearfixをコピーし忘れないようにご注意ください）

CSSコード

/* --- 1番目のメニュー --- */
/* --- ボックス --- */
.section1 {
width: 398px; /* ボックスの幅 */
margin: 20px 0; /* ボックスのマージン（上下、左右） */
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #c0c0c0 solid; /* ボックスの枠線 */
font-size: 80%; /* ボックスの文字サイズ */
}
/* --- メニューエリア --- */
.section1 .menu {
width: 380px; /* メニューエリアの幅 */
margin: 10px auto; /* メニューエリアのマージン（上下、左右） */
}
/* --- メニュー --- */
.section1 .menu ul {
width: 50%; /* メニューの幅 */
margin: 0;
padding: 0;
list-style-type: none;
float: left;
}
/* --- メニュー項目 --- */
.section1 .menu li {
padding: 0 5px 3px 10px; /* 項目のパディング（上右下左） */
background: url(square.gif) no-repeat 0 1.5px; /* 項目の背景 */
}
/* --- リンク --- */
.section1 .menu li a {
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; /* メニューエリアのマージン（上下、左右） */
}
/* --- メニュー --- */
.section2 .menu ul {
width: 50%; /* メニューの幅 */
margin: 0;
padding: 0;
list-style-type: none;
float: left;
}
/* --- メニュー項目 --- */
.section2 .menu li {
padding: 0 5px 3px 22px; /* 項目のパディング（上右下左） */
background: url(folder.gif) no-repeat 0 0.9px; /* 項目の背景 */
}
/* --- リンク --- */
.section2 .menu li a {
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;
}

HTMLコード

<div class="section1">

<div class="menu clearFix">

<ul>
<li><a href="#">メニュー項目1</a></li>
<li><a href="#">メニュー項目2</a></li>
<li><a href="#">メニュー項目3</a></li>
<li><a href="#">メニュー項目4</a></li>
</ul>

<ul>
<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>


<div class="section2">

<div class="menu clearFix">

<ul>
<li><a href="#">メニュー項目1</a></li>
<li><a href="#">メニュー項目2</a></li>
<li><a href="#">メニュー項目3</a></li>
<li><a href="#">メニュー項目4</a></li>
</ul>

<ul>
<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>

備考

floatの解除には「clearfix」という手法を使用しています。
「メニューエリアの幅」の指定は省かないようにしてください（IEでの不具合を避けるため）。