How to use JavaScript and CSS to generate a dropdown menu

There are a lot of source code about JS menus, and there are also a lot of pure CSS. They are encapsulated well, but it is not easy to modify because the internal logic is complicated. The disadvantage of the CSS dropdown menu is that the browser is too compatible with too many codes, which may cause poor readability.

The principle is actually very simple:
1. Use an absolute Div, show during onmouseover, and hide during onmouseout.
2. Use the location of the relative parent Div, and the position of the DIV is relative to the parent element;
3. For mouseout messages, because the parent node is the unit, the sub-node can use table to solve the problem of mouse movement.

 

Function displaymenu (ID, visible)
...{
VaR OBJ = Document. getelementbyid (ID );
If (OBJ = NULL)
...{
Alert (ID + "-- not found! ");
Return;
}
If (visible)
OBJ. style. Visibility = 'visable'
Else
OBJ. style. Visibility = 'den den'
}

<Ul> <li> <a href = ""> Chongqing </a> </LI> <li> <a href = ""> Hangzhou </a> </Li> <li> <a href = ""> Nanjing </a> </LI> <li> <a href = ""> Shanghai </a> </LI> <li class = "citymenu" onmouseover = "displaymenu ('morecity ', true); "onmouseout =" displaymenu ('morecity ', false ); "> More> <Table id =" morecity "> <tr> <TD> <a href =" "> Chengdu </a> </TD> <a href = ""> Zhengzhou </a> </TD> </tr> </table> </LI> </ul>

Or directly go to my home page to capture code, see the effect, huh, http://www.yofun.cn