首先找到相关的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>