I registered on your site to have the appropriate access to page because I wanted to see how it looks underneath. And I've made a few changes which you can see below.
Now the Table is shown on mouse-over and hidden on mouse-out;
The Code:
Code:
<head>
<style type="text/css" media="screen">
BODY
{
font-family: verdana, tahoma, arial, sans-serif;
font-size: 10pt;
margin: 0px;
margin-left: 3px;
margin-right: 3px;
padding: 0px;
}
P
{
padding-top: 10px;
margin: 0px;
}
table.navbar
{
font-size: 8pt;
margin: 0px;
padding: 0px;
border: 0px;
font-weight: bold;
}
table.menu
{
font-size: 8pt;
margin: 0px;
padding: 0px;
font-weight: bold;
}
td.menuNormal
{
padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
background-color: white;
}
td.menuHover
{
padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
}
div.menuNormal
{
display: none;
position: static;
}
div.menuHover
{
border: 1px solid lightblue;
background-color: white;
display: inline;
position: absolute;
}
</style>
<script type="text/javascript">
function expand(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuHover";
d.className = "menuHover";
}
function collapse(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuNormal";
d.className = "menuNormal";
}
</script>
</head>
<body>
<table class="navbar">
<tr>
<td class="menuNormal" width="160" onmouseover="expand(this);" onmouseout="collapse(this);">
<p>
Welcome, <b>costintrifan</b> <img id="Image1" src="Tibia%20spot%20of_files/down.png" /></p>
<div class="menuNormal" width="155">
<table class="menu" id="Table1" style="border-right: #000000 1px solid; border-top: #000000 1px solid;
background-image: url(images/n2.gif); border-left: #000000 1px solid;
border-bottom: #000000 1px solid; background-repeat: repeat-x; background-color: white;
width: auto;" cellspacing="10" cellpadding="10">
<tbody>
<tr>
<td valign="top" colspan="2">
<a href="http://www.tibiacity.org/">Tibiacity</a> - <a href="http://www.tibiacity.org/forum">
Forum</a> - <a href="http://www.tibiacity.org/blog">Blog</a><br>
<br>
<center>
<img class="border" title="My avatar" src="Tibia%20spot%20of_files/image.gif"></center>
</td>
<td valign="top">
<b>Spots menu</b><br>
<br>
<a href="#">Homepage</a><br>
<a href="#">Manual</a><br>
<br>
<a href="#">Your spot</a><br>
<a href="#">Your blog</a><br>
<a href="#">Your images</a><br>
<a href="#">Your movies</a><br>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</body>
All you have to do now is to adapt it to your page, change the css classes...
Just copy and paste (simple as that)
[btw, i like your site]