A combination of CSS and JS drop-down menu, supporting the mainstream browser

First, declare:

Although I have been in the Web front-end post for many years, but helpless post on the technical requirements are not high. Html,css with more, JavaScript own original very few, basic are copy modification, so their real hands-on writing, found that the foundation is not strong, learning while practicing, harvest is very big.

：

No, it's a bit of a sticker.

1. CSS Code

A:link{color:white;text-decoration:none;} A:visited{color:white;text-decorative:none;} A:hover{color:white;text-decorative:none;} A:active{color:white;text-decorative:none;} Li{float:left;display:inline;background-color: #003366; width:120px;text-align:center;margin:2px;padding:10px 0 5px 0;position:relative;}. Limouseover{background-color: #0033ff; color:red;}. Limouseout{background-color: #003366; color:black;} Li ul{display:none;width:120px;position:absolute;left:0;top:30px;} Li ul li{margin:0px auto;border-top:1px solid #006699;}

2. JavaScript code

<script language=javascript>function Menu (menu1) {//mouse in move out classname Toggle and submenu hide, display toggle. if (document.getElementById (menu1)) {var Menu_ul=document.getelementbyid (menu1), if (Menu_ul.getelementsbytagname (" Li "). {var menu_li=menu_ul.getelementsbytagname (" Li "); for (I-in Menu_li) {menu_li[i].onmouseover=function () { This.classname= "Limouseover", if (This.getelementsbytagname ("ul"). Length) {this.getelementsbytagname ("ul") [0]. style.display= "block";}} Menu_li[i].onmouseout=function () {this.classname= "limouseout"; if (This.getelementsbytagname ("ul"). Length) { This.getelementsbytagname ("ul") [0].style.display= "None";}}}}} </script>

3. HTML code

<ul id=menu1><li><a href= "" > Home </a></li><li><a href= "" > Menu 1 Menu 1</a> <ul><li><a href= "" > Submenu 1 Submenu 1 submenu 1 submenu 1</a></li><li><a href= "" > submenu 2</a ></li></ul></li><li><a href= "" > Menu 2</a><ul><li><a href= "" > Submenu 1 submenu 1 submenu 1 submenu 1</a></li><li><a href= "" > submenu 2</a></li></ul></li ></ul>

<script>var menu1=new Menu ("menu1");</script>

Description

1, considering the UL and Li pages used more, you can add #menu1 in front of the CSS, to the menu style to limit the scope.

2, JS mainly on the mouse to move in and remove the event is listening, corresponding to switch to Limouseover and limouseout style, and the display properties of the submenu to make changes to show hidden features.

3, the same page can be repeated calls, does not conflict, the JavaScript code in the HTML code is the invocation instance, the preceding menu1 is any variable name, the menu1 in parentheses is the ID in the HTML page.

Disadvantages of this example:

1, the menu Li's MouseOver, mouseout and sub-menu Li's style, namely the same color and the font, did not implement individual settings.

2, because to be compatible with IE6 and IE7, so the use of position:absolute at the same time, add the left and top properties, top to be based on the overall height of the menu Li set.

A combination of CSS and JS drop-down menu, supporting the mainstream browser