html - 選択したタブを下に設定して境界線を非表示にします

Question

タブストリップを開発しています。選択したタブをコンテナ div で 1px オーバーラップさせて、コンテナの一部であるように見えるようにしたい...
ここにjsfiddleがあります。
スクリプトを使用して作成したくありません。まずはCSSスタイルを優先したいのですが、純粋なCSSではできないというならスクリプトしかありません。次のようになります。

Answer 1

こんにちは、CSS でいくつかの CSS を次のように定義します

 .vUiTsTabs > ul{
overflow:hidden;  // remove this line
}

またはこのcssを追加します

.vUiTsTabs > ul:after{
content:'';
    overflow:hidden;
    display:block;
    clear:both;
}
.vUiTsTab.vUiTsTabSel{
position:relative;
}
.vUiTsTab.vUiTsTabSel:after{
content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-3px;
    height:3px;
    background:#F3F3F3;
}

ライブデモ

Answer 2

ライブデモも作成しましたが、使用しているコンピューターの速度が非常に遅いため、それに打ちのめされました

Answer 3

デモを見る

このスタイルをフィドルに追加します

.vUiTsContainers {
z-index: 1;
top: -3px;
position: relative;
}

.irmNText {
z-index: 10;
position: relative;
}