温习：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;
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 文件内容： 稍后我加上注释后放上来。。。