﻿/* 加載csshover3.htc，解決IE6沒有li:hover擬類的問題 */
* html body {
    behavior: url("csshover3.htc");
}
/* ---------- 大小與定位 ---------- 276 36 69 */
    #menu ul {
        /* 取消ul樣式符號 */
        list-style-type: none;
        /* 重設ul邊界與留白為零 */
        margin: 0;
        padding: 0;
        /* 內有浮動元件時，需設overflow才會自動調整大小 */
        overflow: auto;
    }

    * html #menu ul {
        /* 解決IE6不理overflow問題，直接指定高度 */
        height: 32px;
    }

        #menu ul li {
            /* 利用float讓第一層li水平排列 */
            float: left;
        }
        /* 解決IE6條列式餘白問題*/
        * html #menu ul li {
            display: inline;
        }

            #menu ul li a {
                /* 將a改為區塊元件，以便指定寬高 */
                display: block;
                /* 這邊也要設float，否則IE6會以100%寬度顯示 */
                float: left;
                /* 固定高度 */
                text-align: center;
            }
            #menu ul li a img {
            }

            #menu ul li ul {
                /* 讓第二層ul跳脫文件流以利定位 */
                position: absolute;
                /* 固定寬度 */
                width: 100px;
                /* 避免出現捲軸 */
                overflow: visible;
                /* 讓ul與母階層li相同位置 */
                clear: left;
                margin-top: -413px;
                margin-right: 0;
                margin-bottom: 0;
                margin-left: 171px;
            }
            /* 修正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繼承第一層的設定 */
                        height:30px;
                    }

                    #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;*/
}
    /* 第一層ul背景色彩與邊框 */
    #menu ul {
        /*background: #6f6f6f;*/
    }
        /* 第一層a字型 */
        #menu ul li a {
            /*color: #FFF;*/
            text-decoration: none;
            /*line-height: 28px;*/
        }
        /*第二層ul背景色彩與邊框  */
        #menu ul li ul {
            background: #f9eee8;
            border:1px solid;
            /*border-top:0px;*/
            border-color:#c29e67;
        }
            /* 第二層a字型 */
            #menu ul li ul li {
                margin-top: 6px;
                margin-bottom:6px;
            }
            #menu ul li ul li a table {
                /*color: #333333;*/
                text-decoration: none;
                width:100%;
                padding: 0px;
            }
            #menu ul li ul li a table tr {
                line-height:12px;
            }
                #menu ul li ul li a table tr td {
                    text-align: center;
	        	    vertical-align: middle;
                }
.LeftChs {
    /*font-family: 標楷體;*/
    font-size: 16px;
    font-weight: bold;
    vertical-align: middle;
}
.LeftEng {
    /*font-family: 'Monotype Corsiva';*/
    font-style: italic;
    font-size: 12px;
    font-weight: bold;
    vertical-align:top;
}
        /* 觸動第一層li時，改變背景色 */
        #menu ul li:hover, #menu ul li a:hover {
            background: #efefef;
        }

            #menu ul li:hover a {
                color: #333333;
            }
        /* 觸動第二層以上li時改變背景色 */
        #menu ul li ul li:hover, #menu ul li ul li a:hover {
            background: #dfdfdf;
        }
