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

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

The

code is 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

The

code is as follows:


<script language=javascript>


function Menu (menu1) {


//mouse move in and out of 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

The

code is 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.