/*
Author: Craig Erskine
Description: Dynamic Menu System - Vertical
*/

ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul
{
	width: 161px; /* Menu Width */
	margin: 0; /* for ie */
	padding: 0; /* for firefox */
	list-style: none; /* 將所有項目符號的樣式移除 */
}

ul#navmenu-v ul {
	display: none; /* 所有項目隱藏 */
	position: absolute;
	top: 0; /* 與上一層項目齊高 */
	left: 100%; /* 與上一層項目縮排100% */
	z-index: 9999;
}

ul#navmenu-v li 
{
	position: relative; /* 相對於自己的ul(位於ul縮排的位置) */
	float: left;  /* 緊鄰自己的ul */
	width: 100%;
}

ul#navmenu-v li.iehover 
{ 
	z-index: 1000; /* IE z-index bugfix */ 
}


/* 所有項目的預設值 */
ul#navmenu-v table
{
	border-bottom: 1px solid #999999;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #999999;
	padding: 3px;
	background:url(../images/sec_menuBg.gif) left top no-repeat;
}

ul#navmenu-v a
{
	color: #666;
	font: Arial, sans-serif;
	text-decoration: none;
}

/* 換底圖 */
ul#navmenu-v li:hover table, /* 選取第一層 */
ul#navmenu-v li:hover li:hover table, /* 選取第二層 */
ul#navmenu-v li:hover li:hover li:hover table, /* 選取第三層 */
ul#navmenu-v li:hover li:hover li:hover li:hover table, /* 選取第四層 */
ul#navmenu-v li:hover li:hover li:hover li:hover li:hover table, /* 選取第五層 */
ul#navmenu-v li.iehover table,
ul#navmenu-v li.iehover li.iehover table,
ul#navmenu-v li.iehover li.iehover li.iehover table,
ul#navmenu-v li.iehover li.iehover li.iehover li.iehover table,
ul#navmenu-v li.iehover li.iehover li.iehover li.iehover li.iehover table
{
	background:url(../images/sec_menuBg_hover.gif) left top no-repeat;
}

/* 維持原底圖 */
ul#navmenu-v li:hover li table, /* 選取第一層, 第二層之後維持原底圖 */
ul#navmenu-v li:hover li:hover li table, /* 選取第二層, 第三層之後維持原底圖 */
ul#navmenu-v li:hover li:hover li:hover li table, /* 選取第三層, 第四層之後維持原底圖 */
ul#navmenu-v li:hover li:hover li:hover li:hover li table, /* 選取第四層, 第五層之後維持原底圖 */
ul#navmenu-v li.iehover li table,
ul#navmenu-v li.iehover li.iehover li table,
ul#navmenu-v li.iehover li.iehover li.iehover li table,
ul#navmenu-v li.iehover li.iehover li.iehover li.iehover li table
{
	background:url(../images/sec_menuBg.gif) left top no-repeat;
}

/* 換文字顏色 */
ul#navmenu-v li:hover a, /* 選取第一層 */
ul#navmenu-v li:hover li:hover a, /* 選取第二層 */
ul#navmenu-v li:hover li:hover li:hover a, /* 選取第三層 */
ul#navmenu-v li:hover li:hover li:hover li:hover a, /* 選取第四層 */
ul#navmenu-v li:hover li:hover li:hover li:hover li:hover a, /* 選取第五層 */
ul#navmenu-v li.iehover a,
ul#navmenu-v li.iehover li.iehover a,
ul#navmenu-v li.iehover li.iehover li.iehover a,
ul#navmenu-v li.iehover li.iehover li.iehover li.iehover a,
ul#navmenu-v li.iehover li.iehover li.iehover li.iehover li.iehover a
{
	color: #000000;
}

/* 維持原文字顏色 */
ul#navmenu-v li:hover li a, /* 選取第一層, 第二層之後維持原文字顏色 */
ul#navmenu-v li:hover li:hover li a, /* 選取第二層, 第三層之後維持原文字顏色 */
ul#navmenu-v li:hover li:hover li:hover li a, /* 選取第三層, 第四層之後維持原文字顏色 */
ul#navmenu-v li:hover li:hover li:hover li:hover li a, /* 選取第四層, 第五層之後維持原文字顏色 */
ul#navmenu-v li.iehover li a,
ul#navmenu-v li.iehover li.iehover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li.iehover li a
{
	color: #666;
}

/* 選取第一層, 顯示第二層, 第二層之後隱藏 */
ul#navmenu-v li:hover ul { display: block; }
ul#navmenu-v li:hover ul ul { display: none; }
ul#navmenu-v li:hover ul ul ul { display: none; }
ul#navmenu-v li:hover ul ul ul ul { display: none; }
ul#navmenu-v li.iehover ul { display: block; }
ul#navmenu-v li.iehover ul ul { display: none; }
ul#navmenu-v li.iehover ul ul ul { display: none; }
ul#navmenu-v li.iehover ul ul ul ul { display: none; }

/* 選取第一層, 補回第二層樣式 */
ul#navmenu-v li:hover ul table { border-bottom: 1px solid #999999; border-left: 1px solid #CCCCCC; border-right: 1px solid #999999; }
ul#navmenu-v li.iehover ul table { border-bottom: 1px solid #999999; border-left: 1px solid #CCCCCC; border-right: 1px solid #999999; }

/* 選取第一層, 清除第三層之後樣式, 避免留殘影 */
ul#navmenu-v li:hover ul ul table { border:none; background: none; }
ul#navmenu-v li:hover ul ul ul table { border:none; background: none; }
ul#navmenu-v li:hover ul ul ul ul table { border:none; background: none; }
ul#navmenu-v li.iehover ul ul table { border:none; background: none; }
ul#navmenu-v li.iehover ul ul ul table { border:none; background: none; }
ul#navmenu-v li.iehover ul ul ul ul table { border:none; background: none; }

/* 選取第二層, 顯示第三層, 第三層之後隱藏 */
ul#navmenu-v li:hover li:hover ul { display: block; }
ul#navmenu-v li:hover li:hover ul ul { display: none; }
ul#navmenu-v li:hover li:hover ul ul ul { display: none; }
ul#navmenu-v li.iehover li.iehover ul { display: block; }
ul#navmenu-v li.iehover li.iehover ul ul { display: none; }
ul#navmenu-v li.iehover li.iehover ul ul ul { display: none; }

/* 選取第二層, 補回第三層樣式 */
ul#navmenu-v li:hover li:hover ul table { border-bottom: 1px solid #999999; border-left: 1px solid #CCCCCC; border-right: 1px solid #999999; }
ul#navmenu-v li.iehover li.iehover ul table { border-bottom: 1px solid #999999; border-left: 1px solid #CCCCCC; border-right: 1px solid #999999; }

/* 選取第二層, 清除第四層之後樣式, 避免留殘影 */
ul#navmenu-v li:hover li:hover ul ul table { border:none; background: none; }
ul#navmenu-v li:hover li:hover ul ul ul table { border:none; background: none; }
ul#navmenu-v li.iehover li.iehover ul ul table { border:none; background: none; }
ul#navmenu-v li.iehover li.iehover ul ul ul table { border:none; background: none; }

/* 選取第三層, 顯示第四層, 第四層之後隱藏 */
ul#navmenu-v li:hover li:hover li:hover ul { display: block; }
ul#navmenu-v li:hover li:hover li:hover ul ul { display: none; }
ul#navmenu-v li.iehover li.iehover li.iehover ul { display: block; }
ul#navmenu-v li.iehover li.iehover li.iehover ul ul { display: none; }

/* 選取第三層, 補回第四層樣式 */
ul#navmenu-v li:hover li:hover li:hover ul table { border-bottom: 1px solid #999999; border-left: 1px solid #CCCCCC; border-right: 1px solid #999999; }
ul#navmenu-v li.iehover li.iehover li.iehover ul table { border-bottom: 1px solid #999999; border-left: 1px solid #CCCCCC; border-right: 1px solid #999999; }

/* 選取第三層, 清除第五層之後樣式, 避免留殘影 */
ul#navmenu-v li:hover li:hover li:hover ul ul table { border:none; background: none; }
ul#navmenu-v li.iehover li.iehover li.iehover ul ul table { border:none; background: none; }

/* 選取第四層, 顯示第五層 */
ul#navmenu-v li:hover li:hover li:hover li:hover ul { display: block; }
ul#navmenu-v li.iehover li.iehover li.iehover li.iehover ul { display: block; }

/* 選取第四層, 補回第五層樣式 */
ul#navmenu-v li:hover li:hover li:hover li:hover ul table { border-bottom: 1px solid #999999; border-left: 1px solid #CCCCCC; border-right: 1px solid #999999; }
ul#navmenu-v li.iehover li.iehover li.iehover li.iehover ul table { border-bottom: 1px solid #999999; border-left: 1px solid #CCCCCC; border-right: 1px solid #999999; }