溫習：DIV CSS JS 導覽功能表製作

有些日子沒有使用了，近幾天重新溫習了一下。在此記錄下來，備查。

HTML 檔案內容：

<div id="divHeader" class="clsDivHeader">
    <div id="divMenuMain" name="divMenuMain" class="clsDivMenuMain">
        <ul>
            <li><a href="Product/ProductDefinition.html"><span>產品定位</span></a></li>
            <li><a href="Product/ProductRoadmap.html"><span>產品路標</span></a></li>
            <li><a href="Product/IndexVersion2.html" rel="divMenuSub_a"><span>產品特性</span></a></li>
            <li><a href="Prototype/IndexVersion2.html" rel="divMenuSub_b"><span>產品原型</span></a></li>
            <li><a href="Prototype/IndexVersion2.html"><span>Team Dev</span></a></li>
        </ul>
    </div>
    <div id="divMenuSub_a" name="divMenuSub_a" class="clsDivMenuSub">
        <ul>
            <li><a href="Product/IndexVersion3.html"><span>2.0版本產品特性</span></a></li>
            <li><a href="Prototype/IndexVersion3.html"><span>3.0版本產品原型</span></a></li>
        </ul>
    </div>
    <div id="divMenuSub_b" name="divMenuSub_b" class="clsDivMenuSub">
        <ul>
            <li><a href="Product/IndexVersion3.html"><span>2.0版本產品原型</span></a></li>
            <li><a href="Prototype/IndexVersion3.html"><span>3.0版本產品原型</span></a></li>
        </ul>
    </div>
</div>

<div class="clsDivHorizontalLine"><span></span></div>    <!-- span中包含文字時，在IE中會導致同下面的DIV之間產生間隙 -->

CSS 檔案內容：

/* ******************************************************* */
/* 以頁頭區樣式
*/
/* ******************************************************* */
.clsDivHeader{
    margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
    padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
    width: 100%;
    height: 80px;
    color: #000;
    background-color: #FFF;
}

/* ******************************************************* */
/* 以下為主菜單樣式定義：MenuMain
*/
/* ******************************************************* */
.clsDivMenuMain{
    margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
    padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 50px;
    width: 100%;
    height: 30px;
    line-height: 24px;    /* 因為DIV內部元素 span 定義了上下內部間距各為3px，所以為保證總高度為30px，行高需為：height30-top3-bottom3=24px */
    background: transparent;
    position: absolute;
    top: 50px;
}

.clsDivMenuMain ul{
    margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
    padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
    list-style: none;
}

.clsDivMenuMain ul li{
    margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
    padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
    display: inline;
}

.clsDivMenuMain a{
    margin-top: 0px; margin-right: 2px; margin-bottom: 0px; margin-left: 0px;    /* right: 右側留出間隔 */
    padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 3px;    /*left: 用以顯示左上方的圓角 */
    float: left;
    color: #fff;
    background-color: #000; background-image: url(../Img/color_tabs_left.gif);     /* 左上方為圓角的圖片 */
    background-repeat: no-repeat; background-position: left top;
    text-decoration: none;
}

.clsDivMenuMain a span{
    margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
    padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 0px;    /*right: 用以對應a.left(3px)； top,bottom: 用以留出邊距*/
    float: left;
    display: block;
    background-color: transparent; background-image: url(../Img/color_tabs_right.gif);    /* 右上方為圓角的圖片 */
    background-repeat: no-repeat; background-position: right top;
}

.clsDivMenuMain a span{
    float:none;    /* 在IE中，不使用本樣式，滑鼠為文本游標；使用本樣式，滑鼠為手游標； ???*/
}

.clsDivMenuMain a:hover{
    background-color: #FC0;
}

.clsDivMenuMain .selected{
    background-color: #FC0;
}

.clsDivMenuMainLine .selected{
    display: block;
    background-color: #FC0;
}

/* ******************************************************* */
/* 以下為子功能表樣式定義：MenuSub
*/
/* ******************************************************* */
.clsDivMenuSub{
    position: absolute;
    z-index: 100;
    top: 0;
    font-size: 12px;
    line-height: 18px;
    background-color: white;
    border: 2px solid black;
    border-bottom-width: 1px;
    visibility: hidden;
}

.clsDivMenuSub ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.clsDivMenuSub a{
    display: block;
    text-indent: 5px;
    border-top: 0 solid #678b3f;
    border-bottom: 1px solid #678b3f;
    padding-left: 20px;
    padding-top: 2px;
    padding-right: 10px;
    padding-bottom: 2px;
    text-decoration: none;
    color: black;
}

.clsDivMenuSub a:hover{
    background-color: #8a3c3d;
    color: white;
}

JS 檔案內容：

稍後我加上注釋後放上來。。。