首先找到相关的Menu CSS文件:
?
.menu{
?position:absolute;
?background:#f0f0f0 url('images/menu.gif') repeat-y;
?margin:0;
?padding:2px;
??? border:1px solid #ccc;
?overflow:hidden;
}
.menu-item{
?position:relative;
?margin:0;
?padding:0;
?height:22px;
?line-height:20px;
?overflow:hidden;
?font-size:12px;
?cursor:pointer;
?/*border:1px solid transparent;
?_border:1px solid #f0f0f0;*/
?background-color:#181c25;
?color:#FFF;
?
}
.menu-text{
?position:absolute;
?text-align:center;
?top:0px;
}
.menu-icon{
?position:absolute;
?width:16px;
?height:16px;
?top:3px;
?left:2px;
}
.menu-rightarrow{
?position: absolute;
?width:4px;
?height:7px;
?top:7px;
?right:5px;
?background:url('images/menu_rightarrow.png') no-repeat;
}
.menu-sep{
?margin:3px 0px 3px 24px;
?line-height:2px;
?font-size:2px;
?background:url('images/menu_sep.png') repeat-x;
}
.menu-active{
??? /*border:1px solid #7eabcd;
?background-color:#3573b1;
?-moz-border-radius:3px;
?-webkit-border-radius: 3px;*/
?background-color:#3573b1;
}
?
?
悬停样式定义,对齐样式CSS:
?
a:hover.l-btn{
?background-position: bottom right;
?outline:none;
}
a:hover.l-btn span.l-btn-left{
?background-position: bottom left;
}
a:hover.l-btn-plain{
?width:100px;
?
?color:#EEE;
?outline:none;
}
a:hover.l-btn-disabled{
?background-position:top right;
}
a:hover.l-btn-disabled span.l-btn-left{
?background-position:top left;
}
?
?
页面引用CSS文件和easyui JS文件,调用方式:
?
?
<div id="menudiv"style="width:100px;overflow:hidden;margin:0px;padding:0px;"class="opt_normal">
???????<a href="javascript:void(0)" id="mb1" class="easyui-menubutton" menu="#mm1" >更多记录</a>
?</div>
?<div id="mm1" style="width:100px;overflow:hidden;backgroundcolor:black;margin:0px;padding:0px;">
???????????????<div? style="width:100px;border-color:black;" >Copy</div>
?????????????? <div style="width:100px;border-color:black;">Cut</div>????
?</div>
?
?
若在ie6下会被Select下拉框遮挡在DIV中加入
<iframe style="position:absolute;z-index:-1;width:100%;height:100%;left:0;top:0;" frameborder="0" scrolling="no" src="about:blank"></iframe>?
?