温习：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>开发团队</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;
    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;
    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- 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 文件内容：

稍后我加上注释后放上来。。。