Use a simple script to implement a beautiful drop-down menu

An accidental and boring experiment found such a drop-down menu writing method. After the work is completed, the pleasure is like the Archimedes soaking tub, but the buoyancy principle is discovered!

NAME: Stupid CAT Pull-down Menu v1.0
SUPPORT: Ie (√) Firefox (√)
STANDARD: XHTML 1.0 Strict/CSS2.0

Core style:Copy codeThe Code is as follows: html, body {
Background: #000000;
Height: 100%;
Font-size: 12px;
Font-family: Arial, Helvetica, sans-serif;
Color: #333333;
Margin: 20px auto;
Overflow: hidden;
Text-align: center ;}
/* Menu container menu */
Div # menu {
Width: 100%;
Height: 34px;
Padding: 0px 0px 0px 5px ;}
/* Level-1 menu */
Div # menu div {
Width: 125px;
Height: 20px;
Float: left;
Text-transform: capitalize;
Background: # cccccc;
Padding: 5px 0px 0px 0px;
Margin: 4px 1px 0px 0px ;}
/* Level-2 menu */
Div # menu div {
Width: 125px;
Height: 20px;
Border-bottom: 1px #333333 solid;
Background: #666666;
Margin-top:-4px;
Cursor: pointer;
Display: none ;}
/* Special styles in the level-2 menu (optional )*/
Div # menu div. div1 {
Margin-top: 3px;
Border-top: 1px #333333 solid ;}

Core code:Copy codeThe Code is as follows: var menuItem = document. getElementById ("menu"). getElementsByTagName ("div ");
For (I = 0; I <menuItem. length; I ++ ){
MenuItem [I]. onmouseover = function (){
Var subMenu = this. getElementsByTagName ("div ");
For (j = 0; j <subMenu. length; j ++ ){
SubMenu [j]. style. display = "block ";
SubMenu [j]. onmouseover = function () {this. style. background = "#999999"; this. style. color = "#000000 ";};
SubMenu [j]. onmouseout = function () {this. style. background = "#666666"; this. style. color = "#333333 ";};}
This. style. background = "#666666 "};
MenuItem [I]. onmouseout = function (){
Var subMenu = this. getElementsByTagName ("div ");
For (j = 0; j <subMenu. length; j ++ ){
SubMenu [j]. style. display = "none ";}
This. style. background = "# cccccc "};
}

Xmlns = "http://www.w3.org/1999/xhtml">

Menu item1sub menu1sub menu2sub menu3sub menu4menu item2sub menu1sub every menu3menu item3sub every menu2menu item4sub every menu4menu item5sub every menu3menu item6sub every menu2sub menu3