/* 加載csshover3.htc，解決IE6沒有li:hover擬類的問題 */
* html body {
    behavior:url('../Content/csshover3.htc');
}

/* ---------- 大小與定位 ---------- */
#TopMenu
{
    /* 選單大小 width:600px; */
    height: 30px;
    padding-left: 20px;
    position: absolute;
    right: 20px;
    top: 40px;
}

#TopMenu ul {
    /* 取消ul樣式符號 */
    list-style-type:none;
    /* 重設ul邊界與留白為零 */
    margin:0;
    padding:0;
    /* 內有浮動元件時，需設overflow才會自動調整大小 */
    overflow:auto;
}

* html #TopMenu ul {
    /* 解決IE6不理overflow問題，直接指定高度 */
    height:30px;
}

#TopMenu ul li {
    /* 利用float讓第一層li水平排列 */
    float: left;
    padding-right: 20px;
}

/* 解決IE6條列式餘白問題*/
* html #TopMenu ul li {
    display:inline;
}

#TopMenu ul li a, #TopMenu ul li span{
    /* 將a改為區塊元件，以便指定寬高 */
    display:block;
    /* 這邊也要設float，否則IE6會以100%寬度顯示 */
    float: left;
    /* 固定高度 */
    height:30px;
    /* width: 100px; */
    text-align: left;
}

#TopMenu ul li ul {
    /* 讓第二層ul跳脫文件流以利定位 */
    position:absolute;
    /* 固定寬度 */
    /* width:100px; */
    /* 避免出現捲軸 */
    overflow:visible;
    /* 讓ul與母階層li相同位置 */
    clear:left;
    margin-top: 30px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

/* 修正IE7絕對定位差異 */
*:first-child+html #TopMenu ul li ul {
    margin-top:0;
}

/* 修正IE6絕對定位差異 */
* html #TopMenu ul li ul {
    margin-top:0;
}

#TopMenu ul li ul li {
    /* 覆寫繼承自第一層的浮動設定 */
    float:none;
    text-align: center;
}

#TopMenu ul li ul li a {
    /* 覆寫繼承自第一層的浮動設定 */
    float:none;
    width: auto;/* 註：display、height、padding繼承第一層的設定 */
}

#TopMenu ul li ul li ul {
    margin-top: -30px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 90px;
    width: 110%;
    height: auto;
}

/* 修正IE7絕對定位差異 */
*:first-child+html #TopMenu ul li ul li ul {
    margin-top:-30px;
}

#TopMenu ul li ul li ul li {
/* width、float繼承第二層，免設定 */
}

#TopMenu ul li ul li ul li a {
    /* width、float繼承第二層，免設定 */

}

/* ---------- 隱藏與顯示階層 ---------- */
#TopMenu ul li ul {
    /* 預先隱藏第二層 */
    visibility:hidden;
}

#TopMenu ul li:hover ul {
    /* 觸動第一層時，顯示第二層 */
    visibility:visible;
}

#TopMenu ul li:hover ul li ul {
    /* 顯示第二層時，隱藏第三層，避免同時彈出 */
    visibility:hidden;
}

#TopMenu ul li ul li:hover ul {
    /* 觸動第二層時，顯示第三層 */
    visibility:visible;
}

#TopMenu ul li ul li:hover ul li ul {
    /* 顯示第三層時，隱藏第四層，避免同時彈出 */
    visibility:hidden;
}

#TopMenu ul li ul li ul li:hover ul {
    /* 觸動第三層時，顯示第四層 */
    visibility:visible;
}

/* ---------- 以下為美化用，非必需 ---------- */
/* 預設字體 */
#TopMenu, a.WSL_TPS_Font_ZIP_Downloaded, a.WSL_TPS_IME_x86_ZIP_Downloaded, a.WSL_TPS_IME_x64_ZIP_Downloaded
{
    color: #666666;
}

/* 第一層ul背景色彩與邊框 */
#TopMenu ul
{
    background-color: #FFFFFF;
}

/* 第一層a字型 */
#TopMenu ul li a, #TopMenu ul li span,
{
    text-decoration: none;
    line-height: 30px;
}

/*第二層ul背景色彩與邊框  */
#TopMenu ul li ul
{
    border: 1px solid #C0C0C0;
}

/* 第二層a字型 */
#TopMenu ul li ul li a 
{
    color: #666666;
    text-decoration: none;
}

/* 觸動第一層li時，改變背景色 */
#TopMenu ul li:hover, #TopMenu ul li a:hover
{
    color: #000000;
}

#TopMenu ul li:hover a {
    
}

/* 觸動第二層以上li時改變背景色 */
#TopMenu ul li ul li:hover {    
    background:#EDEDED;
}

#TopMenu ul li ul li a:hover {
    color: #000000;
}

/* 與下方的距離 */
div.Menu
{
    padding-bottom: 12px;
}

/* 超連結 */
a.TopMenu
{
    color: #666666;
    padding: 0px 5px 0px 5px;
}

/* 箭頭符號 */
span.arrow
{
    position: absolute;
	display: block;
	right: 3px;
	margin-top: -20px;
	width: 10px;
	height: 10px;
	text-indent: -999em;
	overflow: hidden;
    background: url('../Content/Images/arrow.png') no-repeat;
}