//CSS
.menu_h,.menu_v,.menu_h li,.menu_v li {
margin: 0;padding: 0;
line-height: 21px;
font-size: 12px;
list-style-type: none;
text-align:left;
display: inline;
}
.menu_h a {
display: block;
line-height: 17px;
text-decoration:none;
color:#807a62;
}
.menu_v a {
display: block;
line-height: 21px;
text-decoration:none;
color:#333333;
padding-left:3px;
}
.menu_h li {
float: left;
background-color: white;
}
.oneMenu {
background: url(/view/images/xjt.png) no-repeat right center;
width:82px;
margin:0;
padding-top:3px;
padding-left:3px;
}
.menu_v li {
float: none;
background-color: #white;
overflow: hidden;
}
.sub_menu_off .menu_v {
display: none;
background: white;
}
.sub_menu_on .menu_v {
display: block;
background: white;
border:1px solid #E4E9E9;
position: absolute;
word-wrap: break-word;
z-index: 99999;
list-style-position: outside;
max-height:300px;
Overflow-y:auto;
overflow-x: hidden;
}
.menu_v a:hover {
background: #CCC;
}
//js
$('.menu_v li').live('click',function(){
$(this).parent().parent().removeClass();
$(this).parent().parent().addClass("sub_menu_off");
$(this).parent().parent().children("a").html($(this).text());
var value = $(this).children("a").attr("value");
$(this).parent().parent().find("input[name='authType']").val(value);
});
$(".sub_menu_off").live('click',function(){
$(this).removeClass();
$(this).addClass("sub_menu_on");
$("body").bind("mousedown", {index:this}, function(e){
while (e.target != undefined && e.target != null && e.target.tagName.toUpperCase() != "BODY"){
if (e.target == e.data.index){
return false;
}
e.target = e.target.parentNode;
}
$(e.data.index).removeClass();
$(e.data.index).addClass("sub_menu_off");
$("body").unbind();
});
});
$(".sub_menu_on").live('click',function(){
$(this).removeClass();
$(this).addClass("sub_menu_off");
});
//html
<ul class="menu_h" >
<li class="sub_menu_off" id="topShow" >
<input type="hidden" name="authType" value="1"/>
<a href="#" class="oneMenu" >私密(仅个人可看)</a>
<ul class="menu_v" >
<li ><a style="width:100%;" href="javascript:;" value="1">私密(仅个人可看)</a></li>
<li ><a style="width:100%;" href="javascript:;" value="2">上级领导</a></li>
</ul>
</li>
</ul>