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

/* ---------- 大小與定位 ---------- */
#menu {/* 選單大小 */
  /*background: url(../images/bg_header-2.jpg) no-repeat left;*/
  cursor:pointer;
  position: absolute;
	left: 0px;
	bottom: 0px;
	width: 960px;
	height: 101px;
	/*height: 40px;*/
	/*position: relative;*/
	/*padding: 0 0 0 112px;*/
	padding: 0;
	z-index: 20;
}

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

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

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

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

#menu li.news {margin-left: 0px; width:134px;}
#menu li.show {margin-left: 0px; width:124px;}
#menu li.exhibition {margin-left: 0px; width:151px;}
#menu li.animation {margin-left: 0px; width:92px;}
#menu li.workshop {margin-left: 0px; width:105px;}
#menu li.preferential {margin-left: 0px; width:118px;}
#menu li.place {margin-left: 0px; width:125px;}
#menu li.about {margin-left: 0px; width:101px;}

#menu ul li a {
	display: block;/* 將a改為區塊元件，以便指定寬高 */
	float: left;/* 這邊也要設float，否則IE6會以100%寬度顯示 */
	line-height: 25px;/* 固定高度 */
	padding-left: 11px;
	/*padding: 15px 0 0 11px;/* 設定上方padding讓文字垂直置中，設定左右padding加大按鈕距離 */
}
	#menu > ul > li > a {
		height: 101px;
	}

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

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

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

#menu ul li ul.newsu li {
	border-bottom: 1px solid #be7800; 
	float: none;/* 覆寫繼承自第一層的浮動設定 */
	width: 100%;/* 第二層以上固定寬度 */	
    min-width:134px;
}

#menu ul li ul li:first-child {
	border-top: 1px solid #be7800; 
}

#menu ul li ul.showu li { border-bottom: 1px solid #be7800; float: none; width: 100%; min-width:124px;}

#menu ul li ul.exhibitionu li { border-bottom: 1px solid #be7800; float: none; width: 100%; min-width:151px;}

#menu ul li ul.workshopu li { border-bottom: 1px solid #be7800; float: none; width: 100%; min-width:105px;}

#menu ul li ul.aboutu li { border-bottom: 1px solid #be7800; float: none; width: 100%; min-width:101px;} 

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

#menu ul li ul li ul {
	margin:-40px 0 0 85px;/* 利用margin作定位 */
}

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

#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 {}

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

/* 第一層a字型 */
#menu ul li { font-size: 12px; font-weight: bold; /*position: relative;*/}
#menu ul li a { color: #874524;}
/*
#menu ul li.news { background: url(../images/tm_11.gif) no-repeat center; width: 97px;}
#menu ul li.news:hover { background: url(../images/tm_12.gif) no-repeat center top;}
#menu ul li.show { background: url(../images/tm_21.gif) no-repeat center; width:88px;}
#menu ul li.show:hover { background: url(../images/tm_22.gif) no-repeat center;}
#menu ul li.exhibition { background: url(../images/tm_31.gif) no-repeat center; width:74px;}
#menu ul li.exhibition:hover { background: url(../images/tm_32.gif) no-repeat center;}
#menu ul li.animation { background: url(../images/tm_41.gif) no-repeat center; width:83px;}
#menu ul li.animation:hover { background: url(../images/tm_42.gif) no-repeat center;}
#menu ul li.workshop { background: url(../images/tm_51.gif) no-repeat center; width:88px;}
#menu ul li.workshop:hover { background: url(../images/tm_52.gif) no-repeat center;}
#menu ul li.preferential { background: url(../images/tm_61.gif) no-repeat center; width:89px;}
#menu ul li.preferential:hover { background: url(../images/tm_62.gif) no-repeat center;}
#menu ul li.place { background: url(../images/tm_71.gif) no-repeat center; width:90px;}
#menu ul li.place:hover { background: url(../images/tm_72.gif) no-repeat center;}
#menu ul li.about { background: url(../images/tm_81.gif) no-repeat center; width:102px;}
#menu ul li.about:hover { background: url(../images/tm_82.gif) no-repeat center;}*/

/*第二層ul背景色彩與邊框  */
#menu ul li ul.newsu { background: #ffffff; top: 40px; width:auto; /*left: 10px; width: 102px;*/ opacity:0.8;}
#menu ul li ul.newsu ul li { background: #ffffff; width: 100px;}

#menu ul li ul.showu { background: #ffffff; top: 40px; margin-left:10px; width:auto; /*left: 10px; width: 110px;*/ opacity:0.8;}
#menu ul li ul.showu ul li { background: #ffffff; width: 110px;}

#menu ul li ul.showu li ul.showuu { background: #ffffff; margin: -20px 0 0 85px; width:auto; /*width: 110px;*/ opacity:0.8;}
#menu ul li ul.showu li ul.showuu li { background: #ffffff; width: 110px; border-left: 1px solid #be7800;}

#menu ul li ul.exhibitionu { background: #ffffff; top: 40px; width:auto; /*left: 20px; width: 97px;*/ opacity:0.8;}
#menu ul li ul.exhibitionu ul li { background: #ffffff; width: 97px;}

#menu ul li ul.workshopu { background: #ffffff; top: 40px; width:auto; /*left: 0px; width: 105px;*/ opacity:0.8;}
#menu ul li ul.workshopu ul li { background: #ffffff; width: 105px;}

#menu ul li ul.aboutu{ background: #ffffff; top: 40px; width:auto; /*left: -5px; width: 112px;*/ opacity:0.8;}
#menu ul li ul.aboutu ul li { background: #ffffff; width: 112px;}

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

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

#menu ul li:hover a{ color: #2D3C96;}

/* 觸動第二層以上li時改變背景色 
#menu ul li ul.newsu li:hover    ,#menu ul li ul.newsu li a:hover ,
#menu ul li ul.showu li:hover    ,#menu ul li ul.showu li a:hover ,
#menu ul li ul.showu li ul.showuu li:hover ,
#menu ul li ul.showu li ul.showuu li a:hover ,
#menu ul li ul.exhibitionu li:hover,#menu ul li ul.exhibitionu li a:hover ,
#menu ul li ul.animationu li:hover   ,#menu ul li ul.animationu li a:hover ,
#menu ul li ul.aboutu li:hover   ,#menu ul li ul.aboutu li a:hover
{background: #874524;}
*/