---------------------  this one is OK!!! --------------------
<html>
<head>
<style>
 .menuItem {
   font-family:sans-serif; font-size:12pt;
   width:220;padding-left:20;
   background-color:menu;
   color:black
 }
 .highlightItem {
   font-family:sans-serif; font-size:12pt;
   width:220; padding-left:20;
   background-Color:highlight; color:white;
 }
</style>
</head>
<body oncontextmenu="showMenu(); return false"><h2>Right Click to Bring Up a Context Menu</h2>
<img src="http://www.csdn.net/images/ad/dby3_database.GIF" width="1000" height="2000" name="imgRabbit" ><!-- Context Menu -->
<div id=menu1
  onclick="clickMenu()"
  onmouseover="toggleMenu()"
  onmouseout="toggleMenu()"
  style="position:absolute;
         display:none;
         border: 2px outset black;
         width:220;
         background-color:menu">
<div class="menuItem"
  doFunction="alert(el.innerHTML);">Graph</div>
<hr>
<div class="menuItem"
  doFunction="alert(el.innerHTML);">
  Show News
</div>
<div class="menuItem"
  doFunction="alert(el.innerHTML);">Buy
</div>
<hr>
<div class="menuItem"
  doFunction="alert(el.innerHTML);">Sell
</div>
<div class="menuItem"
  doFunction="alert(el.innerHTML);">
  Refresh Portfolio
</div>
</div>
<!-- End of Context Menu -->
<script>
var el;
function showMenu() {
   ContextElement=event.srcElement;
   menu1.style.leftPos+=10;
   menu1.style.posLeft=event.clientX+document.body.scrollLeft;
   menu1.style.posTop=event.clientY+document.body.scrollTop;
   menu1.style.display="";
   menu1.setCapture();
}
function toggleMenu() {
   el=event.srcElement;
   if (el.className=="menuItem") {
      el.className="highlightItem";
   } else if (el.className=="highlightItem") {
      el.className="menuItem";
   }
}
function clickMenu() {
   menu1.releaseCapture();
   menu1.style.display="none";
   el=event.srcElement;
   if (el.doFunction != null) {
     eval(el.doFunction);
   }
}
</script>
</body>
</html>