JS部分
<script type="text/javascript">
window.onload=function(){
var oUl1=document.getElementById("ul1");
var oLi1=oUl1.children;
var bodyWidth=document.documentElement.clientWidth||document.body.clientWidth;
var bodyHeight=document.documentElement.clientHeight||document.body.clientHeight;
document.oncontextmenu=function(e){
oUl1.style.display="block";
var bodyScrolltop=document.body.scrollTop;
var iWidth=oUl1.offsetWidth;
var iheight=oUl1.offsetHeight;
e=e||window.event;
var x=e.clientX;
var y=e.clientY;
if(x<iWidth/2){
oUl1.style.left=0;
}else if(x>bodyWidth-iWidth/2){
oUl1.style.left=bodyWidth-iWidth+"px";
}else{
oUl1.style.left=x-iWidth/2+"px";
}
if(y>bodyHeight-iHeight){
oUl1.style.top=bodyHeight-iHeight+bodyScrolltop+"px";
}else{
oUl1.style.top=y+bodyScrolltop+"px";
}
for(var i=0;i<oLi1.length;i++){
oLi1[i].index=i;
oLi1[i].onmouseover=function(){
var oUl2=oLi1[this.index].children[0];
oUl2.style.display="block";
var iWidth2=oUl2.offsetWidth;
var iHeight2=oUl2.offsetHeight;
if(x>bodyWidth-iWidth-iWidth2){
oUl2.style.left=-iWidth+"px";
}
else{
oUl2.style.left=iWidth+"px";
}
oUl2.style.top=oLi1[this.index].offsetHeight*this.index+"px";
oLi1[this.index].onmouseout=function(){
oUl2.style.display="none";
}
}
}
return false;
}
document.onclick=function(){
oUl1.style.display="none";
}
}
</script>
CSS部分
<style type="text/css">
*{margin:0; padding:0;}
body{height:3000px;}
#ul1{display:none; position:absolute; left:0px; top:0px;}
/*#ul2{display: block;}*/
li{list-style:none; border:1px solid #ccc; width:100px;}
#ul1>li ul{display:none; position:absolute; left:0px; top:0px;}
</style>
HTML部分
<ul id="ul1">
<li>列表1
<ul>
<li>子列表1.0</li>
<li>子列表1.1</li>
</ul>
</li>
<li>列表2
<ul>
<li>子列表2.0</li>
<li>子列表2.1</li>
</ul>
<li>列表3
<ul>
<li>子列表3</li>
</ul>
<li>列表4
<ul>
<li>子列表4</li>
</ul>
<li>列表5
<ul>
<li>子列表5</li>
</ul>
</li>
<li>列表6
<ul>
<li>子列表6</li>
</ul>
</li>
<li>列表7
<ul>
<li>子列表7</li>
</ul>
</li>
<li>列表8
<ul>
<li>子列表8</li>
</ul>
</li>
<li>列表9
<ul>
<li>子列表9</li>
</ul>
</li>
<li>列表10
<ul>
<li>子列表10.0</li>
<li>子列表10.1</li>
</ul>
</li>
</ul>
Javascript：实操---右键显示列表