A combination of CSS and JS drop-down menu to support the mainstream browser _javascript skills

First declare:

Although I have been working on the front end of the web for many years, the technical requirements of the post are not high. Html,css used more, javascript their original little, basically copy modified, so they really do write, found that the foundation is very weak, while learning and practice, the harvest is great.

Effect Chart:

No, it's a bit of a sticker.

1, CSS Code

Copy Code code as follows:

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

Copy Code code as follows:

<script language=javascript>
Function menu (menu1) {
Mouse move in move out classname Toggle and submenu hide, show toggle.
if (document.getElementById (menu1)) {
var Menu_ul=document.getelementbyid (menu1);
if (menu_ul.getelementsbytagname ("Li"). Length) {
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

Copy Code code as follows:

<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 sub Menu 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 sub Menu 1</a></li>
<li><a href= "" > submenu 2</a></li>
</ul>
</li>
</ul>

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

Description

1, taking into account the UL and Li pages used more, you can add #menu1 before the CSS to the menu to limit the scope of the style.

2, JS is the main mouse to move in and remove the event to listen, 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 front menu1 is any variable name, the menu1 in parentheses is the ID in the HTML page.

The disadvantage of this example:

1, the menu Li MouseOver, mouseout and submenu Li style, that is, the same color and font, does not implement a separate setting.

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