如何使用Javascript结合CSS生成dropdown菜单

关于JS菜单的源代码很多很多，纯CSS的也有不少。都封装的不错，不过因为内在的逻辑比较复杂要想修改还真的不容易的。CSS dropdown菜单的缺点是浏览器兼容代码太多，会搞得可读性很差。

原理其实很简单：
1.  使用一个absolute的DIV，在onmouseover的时候show，在onmouseout的时候hide。
2.  使用relative父DIV的位置，然后DIV的位置就是相对于父元素了；
3.  对于mouseout的消息，因为是父节点为单位的，所以子节点使用table就可以解决鼠标移不进去的问题了。

 

function  displayMenu(id, visible)
... {
    var obj = document.getElementById(id);
    if(obj == null)
    ...{
        alert(id + " -- not found!");
        return;
    }
    if(visible)
        obj.style.visibility='visible'
    else
        obj.style.visibility='hidden'
}

< ul >< li >< a href = "" > 重庆 </ a ></ li >< li >< a href = "" > 杭州 </ a ></ li >< li >< a href = "" > 南京 </ a ></ li >< li >< a href = "" > 上海 </ a ></ li >< li class = " citymenu "  onMouseOver = " displayMenu('morecity', true); "  onMouseOut = " displayMenu('morecity', false); " > 更多 >>< table id = " morecity " >< tr >< td >< a href = "" > 成都 </ a ></ td >< td >< a href = "" > 郑州 </ a ></ td ></ tr ></ table ></ li ></ ul >

或者直接到我做的首页去抓代码，看效果吧，呵呵http://www.yofun.cn