@charset "utf-8";
@import url("reset.css");
/* CSS Document */

/* 選單 li 之樣式 */
			ul.navigation li {
				position: relative;
				float: left;
				z-index:1999;
                font-size:18px; 
				font-family: Arial;

			}
			/* 選單 li 裡面連結之樣式 */
			ul.navigation li a{
				display: block;
				padding: 0px;
				color: #FFF;
			}
			/* 特定在第一層，以左邊灰線分隔 */
			ul.navigation > li > a{
			}
			ul.navigation > li > a:hover{
				color: #1a9dd2;
				background: #000
			}
			/* 特定在第一層 > 第二層或以後下拉部分之樣式 */
			ul.navigation ul{

				display: none;
				float: left;
				position: absolute;			
	
				
			}
			/* 當第一層選單被觸發時，指定第二層顯示 */
			ul.navigation li:hover > ul{
                padding:16px 0px 0px 0px ;
				display: block;
			}			
			/* 特定在第二層或以後下拉部分 li 之樣式 */
			ul.navigation ul li {
				
                font-size:12px; 
				border-bottom: 1px solid #DDD;
			}
			/* 特定在第二層或以後下拉部分 li （最後一項不要底線）之樣式 */
			ul.navigation ul li:last-child {
				border-bottom: none;
			}
			/* 第二層或以後選單 li 之樣式 */
			ul.navigation ul a {
				width: 180px;

				padding: 10px 18px ;	
				color: #666;		
				background: #eee;			
			}
			ul.navigation ul a:hover {		
				background: #CCC;				
			}







































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

/* ---------- 大小與定位 ---------- */

#menu {
    /* 選單大小 */
width:600px;
height:30px;
}

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


#menu ul li {
/* 利用float讓第一層li水平排列 */
float:left;
}



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

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

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

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

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

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

#menu ul li ul li ul {
margin-top: -30px;
margin-right: 0;
margin-bottom: 0;
margin-left: 100px;
width: 100%;

}

/* 修正IE7絕對定位差異 */

*:first-child+html #menu ul li ul li ul {
margin-top:-30px;

}

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

/* ---------- 隱藏與顯示階層 ---------- */

#menu ul li ul {
/* 預先隱藏第二層 */
 visibility:hidden;
}

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

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

}

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

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

}

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

/* ---------- 以下為美化用，非必需 ---------- */

/* 預設字體 */

#menu {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
background:#000;
}

/* 第一層ul背景色彩與邊框 */
#menu ul {
background:#000;
}

/* 第一層a字型 */
#menu ul li a {
color:#FFF;
text-decoration:none;
line-height: 30px;

}

/*第二層ul背景色彩與邊框  */

#menu ul li ul {
background:#efefef;

}

/* 第二層a字型 */
#menu ul li ul li a {
font-size:12px;
color:#333333;
text-decoration:none;

}

/* 觸動第一層li時，改變背景色 */

#menu ul li:hover, #menu ul li a:hover {
 background:000;

}

#menu ul li:hover a {
 color:#333333;
}

/* 觸動第二層以上li時改變背景色 */

#menu ul li ul li:hover, #menu ul li ul li a:hover {
background:#dfdfdf;
}