If you're using a CSS2 compliant browser, this page should have links on the left that change colors when you hover over them. Text should also display below the links. If you're using an older browser, this page will look like something that the dog leaves in the yard for you to step in...
This is accomplished only with CSS, no JavaScript is used.







Put this between your HEAD-tags
<style type="text/css">
<!--
div#menulink {position: absolute; top: 100px; left: 2; width: 120px; font: 12px Arial, sans-serif;}

div#menulink a {display: block; text-align: left; font: bold arial;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #625B55; background: #5F9EA0;
border-right: 3px solid #ffffff;}

div#menulink a:hover {color: #dd0000; background: #335485;
border-right: 3px dashed red;}

div#menulink a span {display: none;}

div#menulink a:hover span {display: block;
position: absolute; top: 220px; left: 0; width: 117px;
padding: 5px; margin: 2px;
color: #000000; background: white;
font: 10px Arial, sans-serif; text-align: left;}

div#content {position: absolute; top: 120px; left: 130px; right: 20px;
color: #000000; background: #ffffff;
font: 16px Arial, sans-serif; padding: 10px; text-align: justify;}
-->
</style>


The rest...
<div id="menulink">
<a href="linkadress.html">Menutext<span>Link description</span></a>
<a href="linkadress.com">Menutext<span>Link description</span></a>
<a href="linkadress.com">Menutext<span>Link description</span></a>
<a href="linkadress.com">Menutext<span>Link description</span></a>
<a href="linkadress.com">Menutext<span>Link description</span></a>
<a href="linkadress.com">Menutext<span>Link description</span></a>
<a href="linkadress.com">Menutext<span>Link description</span></a>
<a href="linkadress.com">Menutext<span>Link description</span></a>
</div>

<div id="content">
Your tekst for the rest of the page...
</div>

Free JavaScripts provided
by Winfolinx.com


Back