"JavaScript" makes use of onmousemove and onmouseout events to make compatible IE6 pure JavaScript without plug-ins for the original Eco drop-down menu dropdown

Drop-down menu dropdown in a lot of front-end frame inside have, directly to use can, but the frame of the drop-down menu is not good change, it is likely to have compatibility issues.

In fact, this thing can be fully used html+css+javascript to achieve.

The effect is as follows:

Its basic production ideas are as follows:

The first is the layout of HTML and CSS, first lay out a table, the table has two lines, a row drop down button, a row drop down menu, occupy the entire width of 100%, the spacing between the cells is 0.

Because a total of 5 elements per column accounted for 20%.

There is no use of the div float to layout, because the table is used here, this drop-down menu group is very good control. There is no need to control the drop-down menu of the corresponding drop-down button in which location, but also to remove the corresponding drop-down menu coordinates and so on such a matter of annoyance.

The drop-down menu corresponding to the drop-down button is initially hidden. If the mouse is placed above the drop-down menu and the drop-down button, then call the following JavaScript to display the drop-down menu of events, using the OnMouseMove event, in fact onmouseover also line.

Then, if the mouse leaves the table containing the drop-down menu, take advantage of the onmouseout event.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">This is followed by the script section, with the "JavaScript" original eco-compatible IE6 image Carousel (click to open link), first using document.getElementById ("dropdown"). getElementsByTagName (" Div "), and take out all of the DIV nodes of the Id=dropdown form to form an array. Pass over the ShowName parameter, which represents the ShowName div to display id=dropdown this form. Corresponds to the drop-down menu exactly. After that, all the DIV nodes are traversed, except that the rest of the ShowName div is hidden.
The Dropdown_dismiss function is a function when the mouse leaves the table, hiding all the div.
<script>function Dropdown_show (showname) {var Dropdownarr=document.getelementbyid ("dropdown"). getElementsByTagName ("div"); for (Var i=0;i<dropdownarr.length;i++) {  if (i==showname) {dropdownarr[i]. style.display= "block";  }  else{  dropdownarr[i].style.display= "None";}}}  function Dropdown_dismiss () {var Dropdownarr=document.getelementbyid ("dropdown"). getElementsByTagName ("div"); for ( var i=0;i<dropdownarr.length;i++) {  dropdownarr[i].style.display= "none";}} </script>


 JavaScript makes use of onmousemove and onmouseout events to make compatible IE6 pure JavaScript plug-in native-free drop-down menu dropdown