A css and js drop-down menu supports mainstream browsers

A css and js drop-down menu supports mainstream browsers

First, declare:

Although I have been working at the web Front-end for many years, I am helpless and have little technical requirements. Html and css are used a lot, and JavaScript is rarely original. Basically, they are modified by copy. Therefore, when you really write your own code, you find that the Foundation is not strong, and you can learn and practice it, and you have gained a lot.

:

No nonsense. I have fixed it.

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 ){
// Move the mouse in and out of the classname switch, hide the sub-menu, and display switch.
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 = ""> homepage </a> </li>
<Li> <a href = ""> menu 1 menu 1 </a>
<Ul>
<Li> <a href = ""> sub menu 1 sub menu 1 sub menu 1 sub menu 1 </a> </li>
<Li> <a href = ""> sub-Menu 2 </a> </li>
</Ul>
</Li>
<Li> <a href = ""> menu 2 </a>
<Ul>
<Li> <a href = ""> sub menu 1 sub menu 1 sub menu 1 sub menu 1 </a> </li>
<Li> <a href = ""> sub-Menu 2 </a> </li>
</Ul>
</Li>
</Ul>

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

 

Note:

1. Considering the use of ul and li pages, you can add # menu1 in front of css to limit the menu style range.

2. js listens to mouse movement and removal events, switches to the limouseover and limouseout styles, and changes the display attribute of sub-menus to hide the display.

3. The same page can be called repeatedly without conflict. The JavaScript code in the html code is a call instance. The preceding menu1 is an arbitrary variable name, And the menu1 in the brackets is the id in the html page.

Disadvantages of this example:

1. The mouseover, mouseout, and submenu li of the menu li have the same style, that is, the same color and font, and are not set separately.

2. Because it is compatible with Ie6 and ie7, the left and top attributes are added while position: absolute is used. The top attribute must be set based on the overall height of the menu li.