タブ型リンクを作成するCSSのモジュールその2。

• Information
• Archives
• Links
• Diary

CSS

.tab2 {
	margin:0;
	padding:5px;
	border-bottom:1px solid #aaa;
}

.tab2 li {
	display:inline;
}

.tab2 li a {
	padding:4px 7px;
	border:1px solid #aaa;
	border-bottom:none;
	margin-right:1px;
	background:#eee;
}

.tab2 li.active_tab a {
	padding:4px 7px;
	border:1px solid #aaa;
	border-bottom:none;
	margin-right:1px;
	background:#fefefe;
}

.tab2 li a:hover {
	padding:4px 7px;
	border:1px solid #aaa;
	border-bottom:none;
	margin-right:1px;
	background:#fefefe;
}

HTML

<ul class="tab2">
<li><a href="/attention.html">Information</a></li>
<li><a href="/archives/">Archives.html</a></li>
<li><a href="/links">Links</a></li>
</ul>

前回のと同じく、まるまるコピー＆ペーストで使ってください。
前回と違うのは見た目と、タブが2行になってもなんとかなる所。
多分。