<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("a").contextmenu(function(){
$("ul",this).css("display","block");
return false;
});
$("a ul li:nth-child(1)").click(function(){
window.open().location.href = "http://www.yahoo.co.jp/";
});
$("a ul li:nth-child(2)").click(function(){
window.open().location.href = "http://www.google.co.jp/";
});
$("a ul li:nth-child(3)").click(function(){
window.open().location.href = "http://www.goo.ne.jp/";
});
$("a ul li:nth-child(4)").click(function(){
window.open().location.href = "http://jp.msn.com/";
});
$("a ul li:nth-child(5)").click(function(){
window.open().location.href = "http://www.livedoor.com/";
});
$(document).click(function(){
$("ul",this).css("display","none");
});
});
</script>
<style>
a{
position:relative;
text-decoration:none;
}
a ul{
display:none;
position:absolute;
top:-20px;
right:-100px;
padding:0;
}
a ul li{
width:100px;
height:30px;
line-height:30px;
text-align:center;
list-style-type:none;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
background-color:pink;
}
a ul li:hover{
background-color:aqua;
}
a ul li:first-child{
list-style-type:none;
border-top:1px solid #000000;
}
</style>
</head>
<body>
<a href="#">右クリック
<ul>
<li>Yahoo</li>
<li>Google</li>
<li>Goo</li>
<li>msn</li>
<li>livedoor</li>
</ul>
</a>
</body>