Learn: Create a navigation menu for div CSS JS

I have not used it for some days. I have reviewed it in recent days. Record it here for future reference.

HTML file content:

<Div id = "divheader" class = "clsdivheader">
<Div id = "divmenumain" name = "divmenumain" class = "clsdivmenumain">
<Ul>
<Li> <a href = "Product/productdefinition.html"> <span> product positioning </span> </a> </LI>
<Li> <a href = "Product/productroadmap.html"> <span> product Road Map </span> </a> </LI>
<Li> <a href = "Product/indexversion2.html" rel = "divmenusub_a"> <span> product features </span> </a> </LI>
<Li> <a href = "prototype/indexversion2.html" rel = "divmenusub_ B"> <span> product prototype </span> </a> </LI>
<Li> <a href = "prototype/indexversion2.html"> <span> Development Team </span> </a> </LI>
</Ul>
</Div>
<Div id = "divmenusub_a" name = "divmenusub_a" class = "clsdivmenusub">
<Ul>
<Li> <a href = "Product/indexversion3.html"> <span> 2.0 product features </span> </a> </LI>
<Li> <a href = "prototype/indexversion3.html"> <span> 3.0 product prototype </span> </a> </LI>
</Ul>
</Div>
<Div id = "divmenusub_ B" name = "divmenusub_ B" class = "clsdivmenusub">
<Ul>
<Li> <a href = "Product/indexversion3.html"> <span> prototype of product 2.0 </span> </a> </LI>
<Li> <a href = "prototype/indexversion3.html"> <span> 3.0 product prototype </span> </a> </LI>
</Ul>
</Div>
</Div>

<Div class = "clsdivhorizontalline"> <span> </div> <! -- When the span contains text, the gap between the DIV and the following occurs in IE -->

CSS file content:

/*************************************** ******************/
/* In the header area style
*/
/*************************************** ******************/
. 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;
}

/************************************ * *******************/
/* the main menu style is defined as follows: 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;/* because the DIV internal element span defines the upper and lower internal spacing of each 3px, so to ensure the total height of 30px, the row height needs to be: 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: interval left on the right */
padding-top: 0px; padding-Right: 0px; padding-bottom: 0px; padding-left: 3px;/* left: used to display rounded corners in the upper left corner */
float: Left;
color: # FFF;
background-color: #000; Background-image: URL (.. /img/color_tabs_left.gif);/* rounded image in the upper left corner */
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: Used to correspond to. left (3px); Top, bottom: used to set the margin */
Float: left;
Display: block;
Background-color: transparent; Background-image: URL (../img/color_tabs_right.gif);/* image rounded corner in the upper right corner */
Background-repeat: No-Repeat; Background-position: Right top;
}

. Clsdivmenumain a span {
Float: none;/* in IE, if this style is not used, the mouse cursor is the text cursor; if this style is used, the mouse cursor is the hand cursor ;??? */
}

. Clsdivmenumain A: hover {
Background-color: # fc0;
}

. Clsdivmenumain. Selected {
Background-color: # fc0;
}

. Clsdivmenumainline. Selected {
Display: block;
Background-color: # fc0;
}

/*************************************** ******************/
/* The following is the sub-menu style definition: 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 {
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 file content:

I will add a comment later and put it up...