Native JS application settimeout implementation drop-down menu

Today implements a very simple drop-down menu of small instances, that is, the mouse in the menu, its submenu appears and the delay disappears. Approximate effects such as:

Look at the layout:

<Divclass= "Menu"ID= "Menu">Main Menu</Div><ulclass= "Mlist"ID= "Mlist">    <Li>Drop-down Dish single</Li>    <Li>Drop-down menu two</Li>    <Li>Drop-down menu three</Li>    <Li>Drop-down menu four</Li></ul>

About CSS Code:

<style> Ul,li{List-style:None;margin:0;padding:0;}a{text-decoration:None}. Menu{padding:0 10px;Border-radius:5px;Background-color:#1E9FFF;Color:#fff;width:100px;Height:35px;Line-height:35px;text-align:Center;float: Left;Margin-right:10px;}. Mlist{Overflow:Hidden;position:Absolute;Top:50px;Border:1px solid #e5e5e5;Border-radius:5px;Background-color:#c6d4ff;Display:None;}. mlist Li{float: Left;padding:0 10px;margin:5px 0;Border-right:1px solid #e5e5e5;}. Mlist Li:last-child{Border-right:None;}</style>

JS as follows:

<script>window.onload=function(){        varOmenu=document.getelementbyid ("menu"); varOmlist=document.getelementbyid ("Mlist"); varTimer=NULL; Omenu.onmouseover=function() {Show ();        }; Omenu.onmouseout=function() {hide ();        }; Omlist.onmouseover=function() {Show ();        }; Omlist.onmouseout=function() {hide ();        }; //Code Merge        functionShow () {clearinterval (timer);//When the mouse moves in, first to clear out the timeromlist.style.display= "Block"        }        functionHide () {//when the mouse moves out to let the submenu slowly (first show 1 seconds) disappearTimer=settimeout (function() {OmList.style.display= "None"            },1000); }    }</script>

The above example summarizes three points:

1, first look at the layout, the main menu Div does not contain sub-menus, so the words are different from the included relationship, the extensibility should be stronger;

2, the mouse move out of the event, and did not let the sub-menu immediately disappear, but first showed 1 seconds, convenient mouse to move into the submenu;

3, the mouse to move to the Master menu, must first clear the timer, otherwise the display effect will be affected.

Well, that's it, but this is a single menu if multiple words should also be able to expand, we can try!

Native JS app settimeout implementation drop-down menu