/*主功能選單 CSS*/
/*圓角樣式由@Html.Menu中自動套用jquery-ui的圓角樣式ui-corner-all*/
/*=====第一層設定(會帶到以下所有階層，除非在以下階層中重新設定)=====
ul清單: 無邊界 無內距 無項目符號 移除項目符號所佔位置 絕對位置(因此需要裝在相對位置的容器中) 行間距
li項目: 向左流動 相對位置 無邊界
a連結 : 行內區塊顯示 內距(上下左5x 右0px)  字型大小117% 文字顏色:白 無背景色(透明) 移除連結的文字裝飾(底線) 最小寬度10em
a連結hover: 更新背景色
*/
#nav, #nav ul	{ margin:0; padding:0; list-style:none none outside; position:absolute; line-height:1.5em;}
#nav li			{ float:left; position:relative; margin:0;}
#nav a			{ display:inline-block; padding:5px 0 5px 5px; font-size:117%; color:#fff; text-decoration:none; min-width:10em;}
#nav a:hover	{ background-color:#0099ff;}

/*=====第二層以下設定(相對元素繼承第一層或其上層之設定，與第一層不同之處或是以下各層不同之處在此重新設定)=====
第二層ul清單: 寬度16em 預設不顯示 與上緣距離1.9em 置頂(後顯示的清單會置於已顯示的清單之上) 顯示ul清單外框 內距5px 背景白色
第三層ul清單: 自動設定與上緣距離(會對齊上層目前之li的上緣) 與左緣距離16em(與上層清單寬度相同，才不會與上層清單左右重疊)
第二層li項目: 寬度同ul清單 向左流動(繼承上層設定。如此下層ul的top才會以此li項目的上緣為參考) 文字靠左對齊
第二層以下a連結: 寬度為li項目95%(因padding設定造成寬度超出) 隱藏超出寬度的資料 高度為自動 文字不斷行 向左流動(不佔用下層選單的位置) 上下邊界1px(配合a連結border寬度) 內距0.3em 透明外框 前景色
第二層以下a連結hover: 透明背景色 顯示外框
*/
#nav ul 		
{
    width:16em; display:none; top:1.9em; z-index:999;
    border:1px solid gray;
    padding: 5px;
    background-color:White;
}
#nav ul ul		{ top:auto; left:16em;}
#nav li ul li 	{ width:100%; text-align:left;}	
#nav li ul a	{ width:95%; overflow:hidden; height:auto; white-space:nowrap; float:left !important; margin:1px 0; padding:0.3em; border:1px solid transparent; color:#333333;}
#nav li ul a:hover    { background-color:transparent; border:1px solid #0099ff;}

/*=====清單顯示/隱藏設定=====*/
/*第1層的li:hover時，隱藏該li下2層以下所有的ul清單*/
#nav li:hover ul ul, 
#nav li:hover ul ul ul, 
#nav li:hover ul ul ul ul{ display:none;}
/*第1、2、3、4層的li:hover時，顯示該li下一層的ul清單。
  因為每個下層的ul清單都包含在上層的li中，所以游標移至下層的ul清單中，仍算其上層li:hover事件*/
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul{ display:block;}

/* Sub-Menu CSS */
.SubMenu { margin:20px 10px; padding-left:0px; }
.SubMenu li
{
    margin: 3px 0; padding: 3px; list-style-type:none;
    -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/;
    -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/;
    -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/;
    -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/;
}
.SubMenu li:hover { background-color:Yellow; }
.SubMenu li.selected { background-color:Silver; }
.SubMenu li a { text-decoration:none; font-size:137%; color:Blue; display:block; }