【CSS】將勇者造型上方橫槓消除

如不看詳解，請挑紅色的字看就好。

使用到的選擇器有：
一、　　.menubarA1　/*次選單與主選單連接部分，上橫槓*/
二、　　.menubarA2　/*次選單結束部分，下橫槓*/

消除的方法有三種，建議是直接使用display比較快：
一、　　使用display
.menubarA1{display:none;}
.menubarA2{display:none;}

display可設定值有：(一)block、(二)inline、(三)none。
　　block：顯示此區塊，其左右兩旁元件換行顯示。
　　inline：顯示此區塊，其左右兩旁元件緊鄰其旁。
　　none：不顯示此區塊，且不占空間。
註：在此處，block與inline效果雷同。


二、　　使用visibility
.menubarA1{visibility:hidden;}
.menubarA2{visibility:hidden;}

visibility可設定值有：(一)inherit、(二)hidden、(三)visible。
　　inherit：顯示此區塊，且繼承父元件的border屬性。此處指的是選擇器「TD」的border屬性。
　　hidden：隱藏此區塊，但仍占有空間。
　　visible：顯示此區塊。


三、　　使用border與background
.menubarA1{border:0px;background:transparent;}
.menubarA2{border:0px;background:transparent;}
註：background亦可改成background-color

border的設定值有三種：(一)邊框顏色、(二)邊框粗細、(三)邊框樣式。
　　例：border:#FF0000 1px solid;
　　此例為粗細1px的紅色實心框線。設定值位置不拘，只要有空格隔開即可。
　　例如：border:solid #FF0000 1px;
　　也是相同的。
　　也可省略幾項不打。
　　例如：border:solid;
　　　　　border:1px #C8C8C8;
　　但如果重複設定的話，則以最後方一項設定值為主。
　　例如：border:#FF0000 solid 1px #FFF000;
　　原本為粗細1px的紅色實心框線，但由於顏色重複設定，所以取最後方一項，則變成了粗細1px的黃色實心框線。

border可細分成：
　　(一)上邊框：border-top
　　(二)下邊框：border-bottom
　　(三)左邊框：border-left
　　(四)右邊框：border-right
其設定方式跟border相同。

還可再細分成：
　　(一)上邊框：
　　　　(1)邊框樣式：border-top-style
　　　　(2)邊框粗細：border-top-width
　　　　(3)邊框顏色：border-top-color
　　(二)下邊框：
　　　　(1)邊框樣式：border-bottom-style
　　　　(2)邊框粗細：border-bottom-width
　　　　(3)邊框顏色：border-bottom-color
　　(三)左邊框：
　　　　(1)邊框樣式：border-left-style
　　　　(2)邊框粗細：border-left-width
　　　　(3)邊框顏色：border-left-color
　　(四)右邊框：
　　　　(1)邊框樣式：border-right-style
　　　　(2)邊框粗細：border-right-width
　　　　(3)邊框顏色：border-right-color
例如設定上邊框的樣式為虛線，粗細2px，顏色為藍色，則要打成
　　border-top-style:dashed;
　　border-top-width:2px;
　　border-top-color:#0000FF;
或者是
　　border-top:dashed 2px #0000FF;

background的屬性有：(一)attachment、(二)color、(三)image、(四)position、(五)repeat。
　　在此處則只有使用到background-color。將顏色設定成transparent(透明色)，是為了不要擋到背景圖。

所以此處的
.menubarA1{border:0px;background:transparent;}
.menubarA2{border:0px;background:transparent;}
打詳細點就變成
.menubarA1{
border-top-style:none;
border-top-width:0px;
border-top-color:transparent;
border-bottom-style:none;
border-bottom-width:0px;
border-bottom-color:transparent;
border-left-style:none;
border-left-width:0px;
border-left-color:transparent;
border-right-style:none;
border-right-width:0px;
border-right-color:transparent;
background-color:transparent;
}
.menubarA2{
border-top-style:none;
border-top-width:0px;
border-top-color:transparent;
border-bottom-style:none;
border-bottom-width:0px;
border-bottom-color:transparent;
border-left-style:none;
border-left-width:0px;
border-left-color:transparent;
border-right-style:none;
border-right-width:0px;
border-right-color:transparent;
background-color:transparent;
}

因為border-(邊框位置)-style、border-(邊框位置)-width、border-(邊框位置)-color所設定的東西皆相同。
所以
　　border-top-style:none;
　　border-bottom-style:none;
　　border-left-style:none;
　　border-right-style:none;
可縮成
　　border-style:none;

這個
　　border-top-color:transparent;
　　border-bottom-color:transparent;
　　border-left-color:transparent;
　　border-right-color:transparent;
可縮成
　　border-color:transparent;

而這個
　　border-top-width:0px;
　　border-bottom-width:0px;
　　border-left-width:0px;
　　border-right-width:0px;
可縮成
　　border-width:0px;

　　又因為不管設定style、color還是width，得到的結果均相同，所以只要挑其中一項就可以消去橫槓。只是width不會占有空間，而style和color會。