Javascript 如何使下拉菜单打开下拉菜单？

我怎样才能使我的下拉菜单成为一个下拉菜单，使它像Windows开始按钮一样显示

菜单应位于左下角。
如果单击按钮，菜单应打开。
而它应该向上打开。
它的外观和工作在最后，像Windows7的开始菜单

这是我的密码：

var main菜单=函数（）{
var=false；
变量设置={
disabledClass:“disabled”，
子菜单类：“子菜单”
}
变量掩码=“”；
var超时；
this.init=函数（p）{
$.extend（设置，p）；
$mask=$（“#菜单顶部mask”）；
$（'ul.main-menu>li'）。单击（函数（事件）{
var target=$（event.target）；
if（target.hasClass（settings.disabledClass）| | target.parents（）.hasClass（settings.disabledClass）| | target.hasClass（settings.subnumClass））{
返回；
}
切换菜单项（$（此））；
});
$（'ul.main-menu>li>ul-li'）。单击（函数（事件）{
//防止单击事件传播到父元素
event.stopPropagation（）；
//如果项目被禁用，则阻止任何操作
if（$（this）.hasClass（settings.disabledClass））{
返回；
}
//如果项目处于活动状态，检查是否有子菜单（当前li中的ul元素）
如果（$（this）.has（“ul”）.length>0）{
//自动切换子菜单（如果有）
切换子菜单（$（此））；
}否则{
//如果没有子菜单，请关闭主菜单。
关闭主菜单（）；
}
});
$（'ul.main-menu>li'）.mouseenter（函数（）{
if（activated&&$（this）.hasClass（'active-menu'）==false）{
切换菜单项（$（此））；
}
});
$（'ul.main-menu>li>ul-li'）.mouseenter（函数（e）{
//隐藏此项目同一级别中所有其他打开的子菜单
$el=$（e.target）；
if（$el.hasClass（'separator'））返回；
clearTimeout（超时）；
var parent=$el.closest（'ul'）；
parent.find（'ul.active子菜单'）。每个（函数（）{
如果（$（此）！=$el）
$（this.removeClass（'active-sub-menu'）.hide（）；
});
//显示所选项目的子菜单
如果（$el.children（）.size（）>0）{
timeOut=setTimeout（函数（）{
切换子菜单（$el）
}, 500);
}
});
$（'ul.main-menu>li>ul-li'）。每个（函数（）{
if（$（this）.children（'ul'）.size（）>0）{
$（this）.addClass（settings.subnumClass）；
}
});
$（'ul.main-menu li.'+settings.disabledClass）.bind（'click'，函数（e）{
e、 预防默认值（）；
});
//#区域-切换主菜单项-
toggleMenuItem=功能（el）{
//隐藏所有打开的子菜单
$（'.active-sub-menu'）.removeClass（'active-sub-menu'）.hide（）；
$（“#菜单顶部掩码”）.remove（）；
var子菜单=el.find（“ul:第一”）；
var top=parseInt（el.css（'padding-bottom'）.replace（“px”），10）+parseInt（el.css（'padding-top'）.replace（“px”），10）+
el.位置（）.顶部+
el.高度（）；
子菜单.前置（$（掩码））；
变量$mask=$（“#菜单顶部mask”）；
var maskWidth=el.width（）+
parseInt（el.css（'padding-left'）。替换（“px”，”），10）+
parseInt（el.css（'padding-right'）。替换（“px”，”），10）；
$mask.css({
位置：'绝对'，
顶部：'-1px'，
宽度：（maskWidth）+“px”
});
submenu.css({
位置：'绝对'，
top:top+‘px’，
左：el.offset（）.left+'px'，
zIndex:100
});
子菜单.stop（）.toggle（）；
激活=子菜单。为（“：隐藏”）==假；
！activated？el.removeClass（'active-menu'）：el.addClass（'active-menu'）；
如果（激活）{
$（'.active menu'）。每个（函数（）{
if（$（this.offset（）.left！=el.offset（）.left）{
$（this.removeClass（'active-menu'）；
$（this.find（“ul:first”）.hide（）；
}
});
}
}
//#端区
//#区域-切换子菜单项-
切换子菜单=功能（el）{
if（el.hasClass（settings.disabledClass））{
返回；
}
var子菜单=el.find（“ul:第一”）；
var paddingLeft=parseInt（el.css（'padding-right'）。replace（'px'，''），10）；
var borderTop=parseInt（el.css（'border-top-width'）.replace（“px”），10）；
borderTop=！isNaN（borderTop）？borderTop:1；
var top=el.position（）.top-borderTop；
submenu.css({
位置：'绝对'，
top:top+‘px’，
左：el.width（）+填充左+px，
zIndex:1000
});
子菜单addClass（“活动子菜单”）；
子菜单show（）；
//el.mouseleave（函数（）{
//子菜单hide（）；
//});
}
//#端区
CloseMain菜单=函数（）{
激活=错误；
$（'.active menu'）.find（“ul:first”）.hide（）；
$（'.active-menu'）.removeClass（'active-menu'）；
$（'.active子菜单'）.hide（）；
};
$（文档）.keyup（函数（e）{
如果（e.keyCode==27）{
关闭主菜单（）；
}
});
$（文档）.bind（'click'，函数（事件）{
var target=$（event.target）；
如果（！target.hasClass（'active-menu'）&&！target.parents（）.hasClass（'active-menu'））{
关闭主菜单（）；
}
});
}
}
$（文档）.ready（函数（）{
新建主菜单（）.init（）；
});
正文{
填充：10px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：13px；
字体大小：正常；
}
.主菜单{
位置：绝对位置；
/*位置：相对位置*/
显示：内联块；
z指数：9999；
底部：0px；
}
#菜单栏{
底部：100%；
}
主菜单{
列表样式类型：无；
保证金：0px 0px 10px 0px；
填充：0px；
}
ul.主菜单>li{
保证金：0；
显示：内联；
列表样式类型：无；
填充：6px 4px 6px 6px；
线高：28px；
垂直对齐：中间对齐；
游标：默认值；
大纲：无；
边框样式：实心；
边框宽度：1px 1px 0 1px；
边框颜色：透明；
}
ul.主菜单>li.活动菜单{
背景色：#fff；
submenu.css({
    position: 'absolute',
    bottom: top + 'px',
    left: el.offset().left + 'px',
    zIndex: 100
});