Horisontital menu der ikke flytter på indholdet
HejJeg har fundet noget kode bl.a. med hjælp fra http://www.eksperten.dk/spm/567111 , men jeg ved ikke om jeg skal skifte det ud igen... Den kode jeg har (se forneden) rykker på mit indhold, og det må det ikke..
Nogen der kan hjælpe med det, eller kender noget der ser ud på samme måde, ikke rykker på indholdet og er simpel (mht. javascript)?
kode____________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
/* NavMenu */
#nav{
list-style: none;
}
#nav ul {
padding: 0;
margin:0;
list-style: none;
width:12em;
z-index:99;
position:relative;
overflow:visible;
}
#nav li {
margin:0;
position: relative;
float:left;
width: 12em;
background-color:#DFDFDF;
border:solid 1px #CECECE;
border-bottom:none;
display:block;
height:auto;
}
#nav a {
text-decoration:none;
display:block;
padding: 0.1em;
margin:0.2em 0 0.2em 0.1em;
background-color:#DFDFDF;
width:11.5em;
height:1em;
}
#nav a:hover{
background-color:#0099CC;
color:#FFFFFF;
background-image:none;
}
#nav ul{
display:none;
}
/*all see this */
#nav ul ul, #nav ul ul ul{
display:none;
position:absolute;
margin-top:-1.8em;
margin-left:12em;
}
/* non-IE browsers see this */
#nav ul li>ul, #nav ul ul li>ul{
margin-top:-1.4em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul{
display:none;
}
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
display:block;
}
li>ul {
top: auto;
left: auto;
}
</style>
<script type="text/javascript">
activateMenu = function(nav) {
/* currentStyle restricts the Javascript to IE only */
if (document.all && document.getElementById(nav).currentStyle) {
var navroot = document.getElementById(nav);
/* Get all the list items within the menu */
var lis=navroot.getElementsByTagName("LI");
for (i=0; i<lis.length; i++) {
/* If the LI has another menu level */
if(lis[i].lastChild.tagName=="UL"){
/* assign the function to the LI */
lis[i].onmouseover=function() {
/* display the inner menu */
this.lastChild.style.display="block";
}
lis[i].onmouseout=function() {
this.lastChild.style.display="none";
}
}
}
}
}
window.onload=function(){
/* pass the function the id of the top level UL */
/* remove one, when only using one menu */
activateMenu('nav');
}
activateMenu('nav');
</script>
</head>
<body>
<table>
<tr>
<td>
<ul id="nav">
<li> <a href="#" >first Level menu</a>
<ul>
<li><a href="#" >second Level menu</a></li>
<li><a href="#" >second Level menu</a>
<ul>
<li><a href="#" >third Level menu</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<h1>No moving this!</h1>
</td>
</tr>
</table>
</body>
</html>
