Problemer med menu
Jeg har problemer med en menu, den virker hvis den ikke er i en tabel, men virker ikke når den er i en tabel.HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="cssverticalmenu.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="500" border="1" cellpadding="10" cellspacing="0">
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td><ul id="verticalmenu" class="glossymenu">
<li><a href="">Forside</a></li>
<li><a href="" >Hvorfor ?</a></li>
<ul>
<li><a href="">Hvorfor ?</a></li>
<li><a href="">Hvornår ?</a></li>
<li><a href="">SUVO</a></li>
<li><a href="">MERCASOL</a></li>
</ul>
<li><a href="">Behandling</a></li>
<ul>
<li><a href="">Info Behandling</a></li>
<li><a href="">Behandlingsforme</a></li>
<li><a href="">Skærmkanter</a></li>
<li><a href="">Inderskærme</a></li>
</ul>
<li><a href="#">Produkter</a>
<ul>
<li><a href="">SUVO</a></li>
<li><a href="">MERCASOL</a></li>
</ul>
</li>
<li><a href="">Garanti</a></li>
<ul>
<li><a href="">Garanti</a></li>
<li><a href="">Kontrol</a></li>
</ul>
<li><a href="">Miljø</a></li>
<li><a href="#">Info</a>
<ul>
<li><a href="">Info</a></li>
<li><a href="">Skriv til os</a></li>
<li><a href="">Kort</a></li>
<li><a href="">Links</a></li>
</ul>
</li>
</ul></td>
</tr>
</table>
</body>
</html>
CSS:
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url(images/glossyback.gif) repeat-x left bottom;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}
.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: center right;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(images/glossyback2.gif);
}
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
JS:
var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.
function createcssmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML=" "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)
