HTML部分代码段:
<span style="white-space:pre"> </span><li >
<a id="addPerson" href="#">
</a>
<ul id="menuItems">
<li><a href="#">123</a></li>
<li><a href="#">456</a></li>
<li><a href="#">789</a></li>
<li><a href="#">5698</a></li>
</ul>
</li>
CSS:
#addPerson{
width:60px;
height:30px;
background:url(../images/add.png) no-repeat;
position:absolute;
top:8px;
right:-24px;
}
#menuItems{
width:140px;
height:124px;
position:absolute;
top:32px;
right:10px;
line-height:30px;
text-align: center;
z-index:10;
color:#ff9900;
background-color:#F7F7F7;
display:none;
}
#menuItems li{
border-bottom:1px solid #ddd;
}
#menuItems li:hover{
background-color:#fff;
}
js代码:(用jQuery实现)
$(document).ready(function(){
$("#addPerson").click(function(){
$("#menuItems").toggle();
});
});