タブメニュー .tabs
長いですが「.tabs 」20150518の記事＝小粋空間
tabMenuと同じ現象が起こっていますので、調整してみましょう。
<meta charset="UTF-8" />
<style>
* { margin: 0; padding: 0; }
body { margin-left: 20px; }
/* タブのスタイル */
.tabs {
list-style: none;
}
.tabs li {
display: inline;
}
.tabs li a {
color: black;
float: left;
display: block;
padding: 4px 10px;
margin-left: -1px;
position: relative;
left: 1px;
background: white;
text-decoration: none;
}
.tabs li a:hover {
background: #ccc;
}
/* 全体の幅とマージン */
.tabbed-area {
width: 300px;
margin: 0 0 120px 0;
}
/* 配置と高さ */
.box-wrap {
position: relative;
min-height: 150px;
}
/* タブコンテンツのスタイル */
.tabbed-area div div {
background: white;
padding: 20px;
min-height: 150px;
position: absolute;
top: -1px;
left: 0;
width: 100%;
}
/* 選択したタブの配色 */
.tabbed-area div div, .tabs li a {
border: 1px solid #ccc;
}
/* タブエリアの位置 */
.cur-nav-fix {
margin-top: 50px;
}
/* タブの位置 */
.cur-nav-fix .tabs {
position: absolute;
bottom: 100%;
left: -1px;
}
/* タブの背景(Firefox) */
.cur-nav-fix .tabs li a {
background: -moz-linear-gradient(top, white, #eee);
}
/* クリックしたタブの罫線 */
.cur-nav-fix .tabs li.cur a {
border-bottom: 1px solid #fff; background: #fff;
}
/* タブをクリックしたときのタブの重なり順序 */
#box-one:target .tabs, #box-two:target .tabs, #box-three:target .tabs {
z-index: 2;
}
/* タブをクリックしたときの全体の重なり順序 */
#box-one:target, #box-two:target, #box-three:target {
z-index: 1;
}
</style>
<div class="tabbed-area cur-nav-fix">
<div class="box-wrap">
<div id="box-one">
<p>テスト1</p>
<ul class="tabs">
<li class="cur"><a href="#box-one">タブ1</a></li>
<li><a href="#box-two">タブ2</a></li>
<li><a href="#box-three">タブ3</a></li>
</ul>
</div>
<div id="box-two">
<p>テスト2</p>
<ul class="tabs">
<li><a href="#box-one">タブ1</a></li>
<li class="cur"><a href="#box-two">タブ2</a></li>
<li><a href="#box-three">タブ3</a></li>
</ul>
</div>
<div id="box-three">
<p>テスト3</p>
<ul class="tabs">
<li><a href="#box-one">タブ1</a></li>
<li><a href="#box-two">タブ2</a></li>
<li class="cur"><a href="#box-three">タブ3</a></li>
</ul>
</div>
</div>
</div>