function XMenu(o) {
    this.$ = function(o) { return document.getElementById(o); }
    this.$$ = function(o, str) { return o.getElementsByTagName(str); }
    this.obj = o;
    this.bind();
}
XMenu.prototype = {
    bind: function() {
        var xxx = this.$(this.obj); //得到传对的对象。在这里，我没有做容错处理。没有判断这个对象存在不存在，如果需要请自己判断。
        var xdt = this.$$(xxx, 'dt'); //得到这个对象下的所有的dt
        var xdd = this.$$(xxx, 'dd'); //得到这个对象下的所有的dd
        var xdtl = xdt.length; //取得有几个dt
        xxx['obj'] = xdt[0]; //给传的对象添加一个属性obj，值为 第一个 dd
        for (var i = 0; i < xdtl; i++) {//循环 该对象下的所有的 dd，并为它添加onmouseover事件。
            xdt[i]['dd'] = xdd[i]; //给当前对象添加一个属性dd,值为，与它相对应的dd对象，它的作用是在移动到当前对象的时候给与它相对应的dd设置样式用的。
            xdt[i]['div'] = xxx; //给当前对象添加一个属性div，值为，调用XMenu时，所传入的参数所对应的对象。
            xdt[i].onmouseover = function() {
                this['div']['obj'].className = 'normal';
                this['div']['obj']['dd'].className = 'none';
                this.className = 'over';
                this['dd'].className = 'block';
                this['div']['obj'] = this;
            }
        }
        xxx.onmouseout = function() {
            var d = this; //用来保存当前的xxx对象
            this.hide = setTimeout(function() {
                d['obj'].className = 'normal';
                d['obj']['dd'].className = 'none';
                d = null;
            }, 50); //鼠标移出后几秒隐藏。在这里设置时间[秒数*1000]
        }
        xxx.onmouseover = function() {
            if (this.hide) {
                clearTimeout(this.hide);
            }
        }
    }
}
window.onload = function() {//在文档onload事件绑定事件处理函数。
    new XMenu('warpper'); //传入id。该对象下的所有dt将会被绑定onmouseover事件。
}