步驟4│選單配置設定

{
    position:absolute;    /*選單 - 絕對位置設定*/
    top:222px;            /*選單 - 向上距離設定*/
    width:937px;            /*選單 - 寬度*/
    text-align:left;        /*選單 - 文字齊左*/
    border:2px #ddd dotted;
    /*選單 - 框線設定依序為 寬度 / 顏色 / 樣式*/
    border-left:none;    /*選單 - 左邊框線不顯示*/
    border-right:none;    /*選單 - 右邊框線不顯示*/
}

{
    position:relative;        /*選單外層無序清單項目 - 相對位置設定*/
    float:left;            /*選單外層無序清單項目 - 浮動靠左*/
    padding:10px 0px;    /*選單外層無序清單項目 - 內距設定依序為 上下 / 左右*/
}

{
    display:inline;        /*選單外層無序清單項目連結 - 顯示方式*/
    color:#666;            /*選單外層無序清單項目連結 - 文字顏色*/
    padding:10px 25px;    /*選單外層無序清單項目連結 - 內距設定依序為 上下 / 左右*/
}

{
    background:#f5fbec;        /*選單外層無序清單項目 滑鼠互動 - 背景顏色*/
}

{
    color:#666;        /*選單外層無序清單項目連結 滑鼠互動 - 文字顏色*/
}

{
    position:absolute;    /*選單第二階層無序清單 - 絕對位置設定*/
    display:none;        /*選單第二階層無序清單 - 顯示方式*/
    top:36px;            /*選單第二階層無序清單 - 向上距離設定*/
    left:0px;                /*選單第二階層無序清單 - 向左距離設定*/
    text-align:left;        /*選單第二階層無序清單 - 文字齊左*/
    width:100%;            /*選單第二階層無序清單 - 寬度*/
}

{
    display:block;            /*選單第二階層無序清單項目 - 顯示方式*/
    background:#c7d947;    /*選單第二階層無序清單項目 - 背景顏色*/
    border:1px #fff solid;
    /*選單第二階層無序清單項目 - 框線設定依序為 寬度 / 顏色 / 樣式*/
}

{
    color:#787878;        /*選單第二階層無序清單項目連結 - 文字顏色*/
    text-align:left;        /*選單第二階層無序清單項目連結 - 文字齊左*/
    display:block;        /*選單第二階層無序清單項目連結 - 顯示方式*/
    padding:5px;        /*選單第二階層無序清單項目連結 - 內距*/
    font-weight:normal;    /*選單第二階層無序清單項目連結 - 文字粗細*/
    width:165px;            /*選單第二階層無序清單項目連結 - 寬度*/
}

{
    background:#dcea77;     /*選單第二階層無序清單項目連結 滑鼠互動 - 背景色*/
}

{
    left: 171px;        /*選單第三階層無序清單 - 向左距離設定*/
    top:-4px;        /*選單第三階層無序清單 - 向上距離設定*/
}

{
    display:block;     /*選單第三階之後與前者相同的設定*/
}

{
    display:none;     /*選單在滑鼠移至其上才會出現*/
}