<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#one{ borde:gray 1px solid;background-color:#f98;200px;
height:20px;padding-left:5px; cursor:hand;}
ul.two{ list-style:none;margin:0px;padding:0px; margin-top:5px;margin-left:30px;100px;text-align:justify;}
ul.two1{ display:none;}
li{ cursor:hand;}
li.Hover{ background-color:#f56;}
</style>
<script type="text/javascript">
var liHover=function()
{
document.getElementById("one").onclick=function()
{
document.getElementById("two").className=document.getElementById("two").className=="two"?"two1":"two";
}
document.getElementById("one").ondblclick=function(){return false;}
document.getElementById("one").oncontextmenu=function(){return false;}
var liCollection=document.getElementsByTagName("li");
for(var i=0;i<liCollection.length;i++)
{
liCollection[i].onmouseover=function()
{
this.className+="Hover";
}
liCollection[i].onclick=function()
{
document.getElementById("two").className=document.getElementById("two").className=="two"?"two1":"two";
document.getElementById("one").innerText=this.innerText;
}
liCollection[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp("Hover\\b"),"");
}
}
}
if(window.attachEvent)window.attachEvent("onload",liHover);
</script>
</head>
<body>
<a href="http://www.google.cn" onclick="javascript:alert(this.innerText);return false;">google</a>
<div id="one">please select contry from follow</div>
<ul class="two" id="two">
<li>china</li>
<li>American</li>
<li>Canada</li>
<li>Korean</li>
<li>Japan</li>
<li>Hokong</li>
</ul>
</body>
</html>