CSS アクティブタブの仕組み

質問

CSS　アクティブタブの仕組み
閲覧ありがとうございます。説明下手ですがお付き合い宜しくお願い致します
CSS勉強も兼ねて擬似フレームのサイトを作っているCSS初心者です
解らないことは本やリファレンスサイトで調べ、忘れた時の為にコメントを書きこみ少しずつですが理解しながらサイトを作っています。
現在テンプレートサイト様が配布されている
http://10prs.com/material/samples/cdp/mono-vivid/index.html
を参考にメニュータブごとに背景色を変え、アクティブになったタブの背景色もタブと同じ色にしようと考察してます。
タブがアクティブになった時にメニューとメイン部分の境界のボーダーが消えるのですが、この仕組みがいまいちよく解りません。
恥ずかしながらアクティブになった時にボーダーが消える部分の記述があるのがどこにあるのか発見できずにいます。
無知なのに無謀な試みと思われるでしょうが御教示頂けないでしょうか、宜しくお願い致します

■以下テンプレートのCSSを抜粋
/* 各#ID＆.class */
div#PAGETOP {
height: 100%;
overflow: auto;
}
div#HEADER {
position: fixed !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
color: #fff;
background: #000;
}
ul#PAN {
display: none;
}
div#MENU {
position: fixed !important;
position: absolute;
top: 80px;
left: 30px;
width: 130px;
}
div#MENU h2 {
display: none;
}
div#MENU ul {
margin-top: 20px;
margin-left: 0;
list-style: none;
position: absolute;
z-index: 100;
height: 100%;
}
div#MENU ul li a {
margin: 5px 0 5px 10px;
padding: 5px 0;
border: 1px solid;
display: block;
width: 119px;
color: #333;
background: #f1f1f1;
font-family: 'Book Antiqua', 'ＭＳ Ｐ明朝', serif;
font-size: 116%;
text-align: center;
text-decoration: none;
}
div#MENU ul li a:hover {
margin-left: 0 !important;
width: 129px !important;
}
li.menu-on a, li.menu-on a:link, li.menu-on a:visited {
margin-left: 0 !important;
border-right: 1px solid #fff !important;
width: 129px !important;
background: #fff !important;
}
div#KIZI {
margin-left: 160px;
padding: 80px 50px 30px 50px;
border-left: 1px solid #333;
background: #fff;
}
ul.modori {
display: none;
}
div#FOOTER {
position: fixed !important;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 22px;
color: #fff;
background: #000;
}
div#FOOTER h2, div#FOOTER ul.modori {
display: none;
}
div#FOOTER ul {
text-align: center;
}
div#FOOTER ul li {
display: inline;
}

回答No.1

rurino · ベストアンサー

li.menu-on a, li.menu-on a:link, li.menu-on a:visited {
margin-left: 0 !important;
border-right: 1px solid #fff !important;
width: 129px !important;
background: #fff !important;
}

この部分ですね。

border-right: 1px solid #fff !important;
右罫線を背景と同色に指定することでボーダーが消えるように見える。

お礼

ありがとうございます、border-right: 1px solid #fff !important;
の記述を見逃していたようです。
これでようやく次のステップやサイトの構築に勤しめます
ご教授有難う御座いました

回答No.2

noname#119957

アクティブになったときのＣＳＳが指定されていないので、これを指定してもいいと思います。