nicht angemeldet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drei Boxen, 1</title>
<SCRIPT language="JavaScript1.2">
// Einige Browserobjekte abfragen und speichern:
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
v6 = (document.getElementById)? true:false;
// Layer anzeigen, je nach Browsermöglichkeiten
function showlayer(layerid)
{
if (ns4) {document.layers[layerid].display = "block";}
else if (v6) {document.getElementById(layerid).style.display = "block";}
else if (ie4) {document.all[layerid].style.display = "inline";}
}
// Layer verstecken, genau das gleiche, nur andersrum ;)
function hidelayer(layerid)
{
if (ns4) {document.layers[layerid].display = "none";}
else if (v6) {document.getElementById(layerid).style.display = "none";}
else if (ie4) {document.all[layerid].style.display = "none";}
}
</script>
<style type="text/css">
body {
font-family : Arial, sans-serif;
font-size : 12px;
width : 788px;
background-color : white;
border : 1px solid #5F0000;
margin : 10% auto auto auto;
padding: 0px;
}
/*#top {
width: 800px;
background: #e2e2e2;
height: 100px;
border-top : 10px solid #5F0000;
border-right : 10px solid #5F0000;
border-left : 10px solid #5F0000;
}*/
#logo {
border : 4px solid #a1a1a1;
background: #ccf;
width:300px;
height:70px;
float:left;
}
#bildoben {
border-top : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:476px;
height:70px;
float:left;
}
#navibg {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: fuchsia;
width:300px;
height:150px;
float:left;
clear:left;
}
#navi {
border-left : 0px solid #a1a1a1;
border-bottom : 0px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:120px;
height:150px;
float:left;
}
.navi {display:none; width:176px; height:150px; border: none; position:absolute; background:#ffffff; float:right;}
#content {
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:476px;
height:417px;
float:right;
}
#bildlinks {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:300px;
height:150px;
float:left;
}
#news {
border-left : 4px solid #a1a1a1;
border-bottom : 4px solid #a1a1a1;
border-right: 4px solid #a1a1a1;
background: #ccf;
width:300px;
height:109px;
float:left;
clear:left
}
#footer{
background-color: gray;
width:780px;
height:15px;
border-bottom : 4px solid #a1a1a1;
border-right : 4px solid #a1a1a1;
border-left : 4px solid #a1a1a1;
clear:left;
}
#links {background: #ccf; width:150px; height:150px; float:left;}
#links a {display: block; text-align: center;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #FFC; background: #444;
border-right: 5px solid #505050;}
#links a:hover {color: #411; background: #AAA;
border-right: 5px double white;}
#links a span {display: none;}
#links a:hover span {display: block;
position: absolute; top: 180px; left: 0; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #AAA; background: black;
font: 10px Verdana, sans-serif; text-align: center;}
</style>
</head>
<body>
<!--<div id="top">top</div>-->
<div id="logo">logo</div>
<div id="bildoben">bild oben</div>
<div id="navibg">
<div id="navi">navi<br>
<a href="whatever" onmouseover="showlayer('subnavi1');" onmouseout="hidelayer('subnavi1');">Dein Link</a><br />
<a href="whatever" onmouseover="showlayer('subnavi2');" onmouseout="hidelayer('subnavi2');">2</a><br />
<a href="whatever" onmouseover="showlayer('subnavi3');" onmouseout="hidelayer('subnavi3');">3</a><br />
<a href="whatever" onmouseover="showlayer('subnavi4');" onmouseout="hidelayer('subnavi4');">4</a><br />
<a href="whatever" onmouseover="showlayer('subnavi5');" onmouseout="hidelayer('subnavi5');">5</a><br />
<a href="whatever" onmouseover="showlayer('subnavi6');" onmouseout="hidelayer('subnavi6');">6</a><br />
<a href="whatever" onmouseover="showlayer('subnavi7');" onmouseout="hidelayer('subnavi7');">7</a>
</div>
<div id="subnavi1" class="navi">subnavi1</div>
<div id="subnavi2" class="navi">subnavi2</div>
<div id="subnavi3" class="navi">subnavi3</div>
<div id="subnavi4" class="navi">subnavi4</div>
<div id="subnavi5" class="navi">subnavi5</div>
<div id="subnavi6" class="navi">subnavi6</div>
<div id="subnavi7" class="navi">subnavi7</div>
</div>
<div id="content">content</div>
<div id="bildlinks">bildlinks
</div>
<div id="news">news</div>
<div id="footer">footer</div>
</body>
</html>
und als kleiner zusatztip für eine javascript-freie lösung:
http://www.koivi.com/css-tool-tip/