I think you want something like this: -the styling
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sliding Menu example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.menu {
left:-800px;
position:relative;
}
#slide {
position: absolute;
top: 5px;
left: -800px;
}
</style>
<script type="text/javascript" language="javascript">
// sliding menu
if (document.getElementById){
stdBrowser=true;
}
else {
stdBrowser=false;
}
function toggleMenu(currElem,nextPos) {
if(stdBrowser) {
menuObj = document.getElementById(currElem).style;
}
else {
menuObj =eval("document." + currElem)
}
if(stdBrowser) {
menuObj.left = nextPos + "px"
}
else {
menuObj.left = nextPos;
}
}
function hideMenu(currElem,origPosition) {
if(stdBrowser) {
menuObj = document.getElementById(currElem).style;
}
else {
menuObj =eval("document." + currElem)
}
if(stdBrowser) {
menuObj.left = origPosition + "px"
}
else {
menuObj.left = origPosition;
}
}
</script>
</head>
<body>
<div style="width:100px" onMouseOver="toggleMenu('slide',60)" onMouseOut="hideMenu('slide',-800)" >Country
<div id="slide" class="menu">
<table>
<tr>
<td><a href = "#">US</a></td>
</tr>
<tr>
<td><a href = "#k">UK</a></td>
</tr>
<tr>
<td><a href = "#">Australia</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
