如何使用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