<ole>
Problemet er ikke specielt IE6-relateret ... den fungerer overhovedet ikke i NS6 :(
Prøv denne her, som kræver en transparent gif (img/t.gif):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> MenuTest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="StyleSheet" href="" type="text/css">
<style type="text/css">
body {
background-color: #000000;
background-image: url(img/bg.gif);
margin: 0px;
}
td, div {
font-family: verdana;
font-size: 10px;
}
#barTBL {
position: absolute;
top: 20px;
width: 300px;
z-index: 2
}
.menBar {
height: 25px;
}
.menu {
position: absolute;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
z-index: 3;
visibility: hidden;
}
a.barLink, a.menLink {
background-color: #ffffff;
color: #000000;
text-decoration: none;
text-align: center;
border: 1px solid #c0c0c0;
padding: 5px 0px;
display: block;
height: 12px;
}
a.barLink:visited, a.menLink:visited {
background-color: #ffffff;
color: #000000;
}
a.barLink:hover, a.menLink:hover {
background-color: #000000;
color: #ffffff;
text-decoration: none;
border: 1px solid #999999;
}
#hImg {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
border: 0px none;
visibilty: hidden;
z-index: 1;
}
</style>
<script type="text/JavaScript">
var actM, d=document;
function getPos(elm) {
for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
return {x:zx,y:zy}
}
function show( e ) {
var oMen, pos, inx = e.id.split("L")[1];
oMen = d.getElementById( "m"+inx );
actM = oMen;
hideAll();
pos = getPos(e);
oMen.style.left = pos.x;
oMen.style.top = pos.y + e.offsetHeight;
oMen.style.width = e.offsetWidth;
oMen.style.visibility = "visible";
d.getElementById("hImg").style.visibility = "visible";
}
function hide( e ) {
e.style.visibility = "hidden";
}
function hideAll() {
var mA = d.getElementsByTagName("DIV");
for ( i=0; i<mA.length; i++ ) {
if ( mA[i]!=actM && mA[i].className=="menu" ) hide( mA[i] );
}
d.getElementById("hImg").style.visibility = "hidden";
}
</script>
</head>
<body>
<table id="barTBL" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="menBar"><a id="L0" href="#" class="barLink" onmouseover="show(this);">MenPunkt 1</a></td>
<td class="menBar"><a id="L1" href="#" class="barLink" onmouseover="show(this);">MenPunkt 2</a></td>
<td class="menBar"><a id="L2" href="#" class="barLink" onmouseover="show(this);">MenPunkt 3</a></td>
</tr>
</table>
<div class="menu" id="m0">
<a href="#" class="menLink">MenLink 0.1</a>
<a href="#" class="menLink">MenLink 0.2</a>
<a href="#" class="menLink">MenLink 0.3</a>
<a href="#" class="menLink">MenLink 0.4</a>
</div>
<div class="menu" id="m1">
<a href="#" class="menLink">MenLink 1.1</a>
<a href="#" class="menLink">MenLink 1.2</a>
<a href="#" class="menLink">MenLink 1.3</a>
</div>
<div class="menu" id="m2">
<a href="#" class="menLink">MenLink 2.1</a>
<a href="#" class="menLink">MenLink 2.2</a>
<a href="#" class="menLink">MenLink 2.3</a>
<a href="#" class="menLink">MenLink 2.4</a>
<a href="#" class="menLink">MenLink 2.5</a>
</div>
<img id="hImg" onmouseover="actM=false;hideAll();" src="img/t.gif">
</body>
</html>
/mvh
</bole>
Ny bruger
Nybegynder
Opret
Preview
